【Lightning Web Component】tabsetを試してみました

こんにちは、アンダーソンです。
今回はlightning-tabsetを実装してみました。

一つのコンポーネント内で複数の情報を
表示できることができるタブ機能を簡単に使うことができる機能です。

ユーザビリティ向上のためにも必要なコンポーネントですので
是非使い方マスターしてしまいましょう。

lightning-tabsetの使い方

lightning-tabsetは下記のようにマークアップしていきます。

<lightning-tabset>
            <lightning-tab label="Test1">
                
            </lightning-tab>
            <lightning-tab label="Test2">
                
            </lightning-tab>
            <lightning-tab label="Test3">
               
            </lightning-tab>
</lightning-tabset>

これで下記のように表示されます。

簡単ですね。
あとはそれぞれのlightning-tabコンポーネントの中にそれぞれの
マークアップをしていけば問題ありません。

初期表示を変更する

お客様の要件としては最初から開いているタブをTest2にしてくれ。
なんてこともあるかもしれません。
そんな時は下記のようにマークアップしましょう。

    <lightning-tabset active-tab-value="Test2">
        <lightning-tab label="Test1">
            
        </lightning-tab>
        <lightning-tab label="Test2" value="Test2">
            
        </lightning-tab>
        <lightning-tab label="Test3">
           
        </lightning-tab>
    </lightning-tabset>

これで下記のように読み込み時にTest2に初期表示されます。

基本的な使い方は以上です。

他にもタブが選択されたときにJavaScriptを起動させたりすることもできます。
気になる方は是非他にも調べて実践してみましょう！

その他の開発に関する記事はこちらです。

Developerも含めた試験問題にチャレンジしてみましょう。