こんにちは、アンダーソンです。
引き続きLWCについてやっていきます。
今回はボタンを押すごとにコンポーネントが変化するというのを作っていきます。
ボタンを作る
まずボタンを表示させましょう。
LWCはhtml、JavaScript、xmlファイルの3つが基本でしたね。
ということでボタンは表示側なので、htmlファイルを編集していきます。
<template>
<lightning-card title="コンポーネント切り替えテスト">
<div>切り替わります</div>
<lightning-button label="ここをおす" class="slds-m-left_x-small"></lightning-button>
</lightning-card>
</template>ものすごく簡単なコードですがこれで、下記のような画面になります。
ここではlightning-buttonタブで簡単にSLDSのCSSを使ったボタンを作りました。
次にこのボタンで切り替えるためのロジックを作っていきます。
切り替えるロジックの作成
ロジックの作成なので次はJavaScriptを編集していきます。
今回はレコードを触ることもなくApiを呼び出すことなどもないので
比較的簡単かと思います。
import { LightningElement } from 'lwc';
export default class MyComponent extends LightningElement {
isChangePanel = true;
clickedButton(){
this.isChangePanel = false;
}
}さらにhtmlを切り替えていきます。
VFではrenderdで条件式を書いたりして表示非表示をコントロールできますが、
LWCの場合はtemplateタブにif属性がありそこでコントロールは可能なようです。
なので下記のようなコードにしてみました。
<template if:true={isChangePanel}>
<div>切り替わります</div>
<lightning-button label="ここをおす" class="slds-m-left_x-small" onclick={clickedButton}></lightning-button>
</template>
<template if:false={isChangePanel}>
<div>切り替わりました</div>
<lightning-button variant="destructive-text" label="ここをおす" class="slds-m-left_x-small" onclick={clickedButton}></lightning-button>
</template>ボタンを押したら文字が切り替わり、ボタンの色も変わるというものにしてみました。
実際に試してみましょう。
OKですね。ただこれだと前の状態に戻せないのでちょっと不完全ですね。
ここに関してはぜひご自分で考えて書いてみてください。
ボタンを押した回数を表示させよう
これまでの応用も含めてボタンを押した回数を表示させてみました。
これもGitHubにあげておくので興味がある方はぜひみてみてください。
まとめ
今回はコンポーネントを動的に変更する手法について書いてみました。
うまくやれば様々な見せ方ができるなと思います。
応用でもやりましたがぜひいろんなパターンで試してみてください。
その他の開発に関する記事はこちらです。
Developerも含めた試験問題にチャレンジしてみましょう。
コメント