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

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

コンポーネントを折りたたむ要素があるので、
うまく使えばUI/UXの改善にも繋がるかと思います。
必要なところにうまく使えるように使い方をマスターしておきましょう。

lightning-accordionの使い方

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

<lightning-accordion class="myAccordion" onsectiontoggle={handleToggleSection}>
         <lightning-accordion-section name="Name" label="名前情報">
             <p>僕の名前はアンダーソンです。</p>
         </lightning-accordion-section>
         <lightning-accordion-section name="Age" label="年齢情報">
             <p>年齢は32歳です。</p>
         </lightning-accordion-section>
         <lightning-accordion-section name="Address" label="住所情報">
             <p>住んでいるのは関西です。</p>
         </lightning-accordion-section>
</lightning-accordion>

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

簡単ですね。
これはベーシックな形なので、年齢情報をクリックすると
名前情報は閉じられますので、一度に一つしか開くことができません。

複数を同時に開くには

他のを押した時に閉じずにそのままにして欲しいなんてことも
あるかもしれませんので、そんな時は下記のようにマークアップします。

    <lightning-accordion allow-multiple-sections-open class="myAccordion">

allow-multiple-sections-openを入れるだけで、複数の同時オープンを
許可してくれます。

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

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

JavaScriptで開いたAccordionがどれかなども見ることもできますし、
Accordion内にボタンを配置したりもできます。
是非他にも試してみてください。

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

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