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