折りたたみグループ
AccordionGroup
コンポーネントを使うと、複数のAccordion
コンポーネントをグループ化して、折りたたみグループを表示できます。
効果
コード:
<AccordionGroup>
<Accordion title="折りたたみブロック1" >
折りたたみブロック1のコンテンツ
</Accordion>
<Accordion title="折りたたみブロック2">
折りたたみブロック2のコンテンツ
</Accordion>
<Accordion title="折りたたみブロック3">
折りたたみブロック3のコンテンツ
</Accordion>
</AccordionGroup>
指定の項目をデフォルトで展開する設定
コード:
<AccordionGroup>
<Accordion title="折りたたみブロック1を展開するように設定" defaultOpen={true}>
折りたたみブロック1のコンテンツ
</Accordion>
<Accordion title="折りたたみブロック2を閉じるように設定">
折りたたみブロック2のコンテンツ
</Accordion>
</AccordionGroup>
アイコンの追加
コード:
<AccordionGroup>
<Accordion title="折りたたみブロック1" icon="material-two-tone-storefront">
折りたたみブロック1のコンテンツ
</Accordion>
<Accordion title="折りたたみブロック2" icon="material-two-tone-business_center">
折りたたみブロック2のコンテンツ
</Accordion>
<Accordion title="折りたたみブロック3" icon="material-two-tone-cottage">
折りたたみブロック3のコンテンツ
</Accordion>
</AccordionGroup>
パラメーターの説明
更新時間 4 months ago