折りたたみグループ

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

title

string

标题

必須

折りたたみブロックのタイトルの定義

description

string

默认状态

可選

折りたたみブロックの下に表示されるテキストの定義

defaultOpen

boolean

デフォルトの状態

可選

折りたたみブロックをデフォルトで展開する

デフォルト値:

true

icon

string

Iconアイコン

可選

Iconの定義　定義方法の詳細はアイコン

効果#

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

アイコンの追加#

パラメーターの説明#

効果

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

アイコンの追加

パラメーターの説明