アコーディオングループAccordionGroupExperimental
ラベル、説明、すべて開く・すべて閉じるを切り替える操作を備えたアコーディオンのグループです。
プレビュー
設定項目
必要な項目だけ開くか、まとめて展開できます。
状態とバリエーション
説明付き
グループの目的を補足し、複数の開閉項目をひとまとまりとして扱います。
アカウント設定
請求、チーム、セキュリティを確認できます。
支払い方法、請求書、更新日を確認できます。
初期展開
重要な項目だけ最初から開き、残りは必要に応じて開けます。
レビュー項目
メンバー招待、権限、ロールを管理できます。
2段階認証、監査ログ、セッションを確認できます。
操作なし
見出しと説明だけをまとめ、すべて開く・すべて閉じる操作を表示しない構成です。
公開設定
必要な項目を個別に開いて確認します。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| values | string[] | - | すべて開く操作で開く AccordionItem の value 一覧です。children から推測せず明示します。 |
| value | string[] | - | 開いている項目を制御する値です。 |
| defaultValue | string[] | [] | 初期表示で開く項目の value 一覧です。 |
| onValueChange | (value: string[]) => void | - | 開いている項目が変わった時に呼ばれます。 |
| label / description | ReactNode | - | グループ見出しと補足説明です。 |
| expandLabel / collapseLabel | string | "Open all" / "Close all" | 開閉状態に応じて切り替わる操作ボタンの表示文言とツールチップです。 |
| showControls | boolean | true | すべて開く・すべて閉じるを切り替える操作を表示するかどうかを指定します。 |
使い方
const sections = [
{ id: "billing", title: "請求設定", body: "支払い方法、請求書、更新日を確認できます。" },
{ id: "team", title: "チーム設定", body: "メンバー招待、権限、ロールを管理できます。" },
{ id: "security", title: "セキュリティ", body: "2段階認証、監査ログ、セッションを確認できます。" },
];
export function SettingsAccordionGroup() {
return (
<AccordionGroup
values={sections.map((section) => section.id)}
label="設定項目"
expandLabel="すべて開く"
collapseLabel="すべて閉じる"
>
{sections.map((section) => (
<AccordionItem key={section.id} value={section.id}>
<AccordionTrigger>{section.title}</AccordionTrigger>
<AccordionContent>{section.body}</AccordionContent>
</AccordionItem>
))}
</AccordionGroup>
);
}