折りたたみグループ

AccordionGroupコンポーネントを使うと、複数のAccordionコンポーネントをグループ化して、折りたたみグループを表示できます。

効果

折りたたみブロック1

折りたたみブロック2

折りたたみブロック3

コード：

<AccordionGroup>
    <Accordion title="折りたたみブロック1" >
        折りたたみブロック1のコンテンツ
    </Accordion>
    <Accordion title="折りたたみブロック2">
        折りたたみブロック2のコンテンツ
    </Accordion>
    <Accordion title="折りたたみブロック3">
        折りたたみブロック3のコンテンツ
    </Accordion>
</AccordionGroup>

指定の項目をデフォルトで展開する設定

折りたたみブロック1を展開するように設定

折りたたみブロック1のコンテンツ

折りたたみブロック2を閉じるように設定

コード：

<AccordionGroup>
    <Accordion title="折りたたみブロック1を展開するように設定" defaultOpen={true}>
        折りたたみブロック1のコンテンツ
    </Accordion>
    <Accordion title="折りたたみブロック2を閉じるように設定">
        折りたたみブロック2のコンテンツ
    </Accordion>
</AccordionGroup>

アイコンの追加

折りたたみブロック1

折りたたみブロック2

折りたたみブロック3

コード：

<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>

パラメーターの説明

Accordion

効果#

指定の項目をデフォルトで展開する設定#

アイコンの追加#

パラメーターの説明#

効果

指定の項目をデフォルトで展開する設定

アイコンの追加

パラメーターの説明