Accordion
View on GitHub: Copmonent
View on GitHub開閉可能なコンテンツを表示するコンポーネント。内部ではネイティブの<details>要素と<summary>要素を使用
Example#
Props#
| Name | Type | Default | Description |
|---|---|---|---|
| children required | ReactNode | - | コンテンツとして表示する内容。開閉で表示・非表示が切り替わる |
| header required | string | - | 見出しに表示するテキスト |
| size | "small" | "medium" | medium | サイズ |
| id optional | string | - | ラッパーであるdetails要素に付与するネイティブ要素の`id`属性。ページで固有のIDを指定 |
| buttonId optional | string | - | 開閉をトリガーするsummary要素に付与するネイティブ要素の`id`属性。ページで固有のIDを指定 |
| initialOpen optional | boolean | - | 初期状態で開く |
| data-* optional | string | - | Custom data attributes |
Usage#
- コンテンツ量が多く、他コンテンツの閲覧を妨害してしまう
- 優先度が低く、閲覧のニーズが少ない
- Q&Aページのように、1ページに多数のコンテンツを表示する必要がある
などのケースで利用します。
重要なコンテンツを <Accordion> に含める場合は注意#
アコーディオンにコンテンツを配置することで、閲覧のハードルが上がります。
- 開閉するために1アクション必要
- ページをスクロールしてもコンテンツの内容を閲覧することができない
例えばリンクなどを <Accordion> 内部に配置した場合、遷移するユーザーが減少する場合があります。
Keyboard Interaction#
- ヘッダーはフォーカスを受け取ります
- EnterまたはSpaceキーを押下することで、コンテンツ部分を開閉することができます