AccordionPanel

縦に積まれた見出しのリストで、関連する詳細の表示・非表示を切り替えられるコンポーネントです。情報量が多い場合に表示内容を絞るときに使います。

補足的な情報を折りたたんで画面をシンプルに保つことで、情報量が増えてもユーザーが重要な情報にたどりつきやすくなります。また、ページの要素が多くスクロールが生じる画面において、まず見出しだけを表示してユーザーに全体像を把握させたい場合にも使用できます。

使用上の注意

AccordionPanelを乱用しない

AccordionPanelを使用することで、スペースを省略しつつ画面内に多くの要素を配置できるようになりますが、多用しすぎると1画面の情報量が増えユーザーの使いづらさに繋がります。画面内の情報量や粒度、構造が適切かどうかを精査してAccordionPanelを使用してください。

ModelessDialogとの使い分け

モードレスに情報を表示したい場合、AccordionPanelの代替としてModelessDialogを使用できます。例えば、「ヘルプページを参照しながら別の操作をする」といったケースでは、画面のスクロールに依存しないModelessDialogを使用してヘルプページを表示するほうが適切です。

レイアウト

アイコンの位置

開閉する機能をアイコンによって認識しやすくするため、デフォルトは見出しの左にアイコンを配置しています。
iconPosition props によってアイコンの位置を左または右に指定できますが、アイコンと見出しの位置が離れAccordionPanelとして認識しづらくなるため、右に配置するのは非推奨です。

デフォルトの開閉状態

デフォルトの開閉状態は、画面が利用される場面や、中に含まれる情報の重要度によって異なります。ユーザーの操作や閲覧が必ず必要な、重要性の高い情報を隠さないように注意してください。

デフォルトで閉じる場合は、以下のような使い方が一般的です。

一部のユーザーしか利用しない機能（例：高度な設定など）を隠し、画面の表示要素をシンプルに保ちたい場合
見出しを並べ、ユーザーに情報全体の構造を把握させたい場合

状態

マウスオーバー

AccordionPanelItemに触れている状態（hover状態）のスタイルです。アイコンや見出しを含む行全体が操作対象です。マウスオーバーを認知できるように、標準時の背景色にOVERLAYを重ねて表現しています。

展開時

アイコンが左にある場合（iconPosition="left"）、FaCaretRightIcon アイコンを90度回転して展開を表現しています。
アイコンが右にある場合（iconPosition="right"）、FaCaretUpIcon アイコンを180度回転して展開を表現しています。

Should
画面内の情報量や粒度、構造が適切かどうかを精査して AccordionPanel を使用する

参照元：使用上の注意 > ModelessDialogとの使い分け「使用上の注意 > ModelessDialogとの使い分け」の本文へ移動

Should
「ヘルプページを参照しながら別の操作をする」など、画面のスクロールに依存せずモードレスに情報を表示したい場合は、AccordionPanel ではなく ModelessDialog を使用する

参照元：レイアウト > アイコンの位置「レイアウト > アイコンの位置」の本文へ移動

Avoid
`iconPosition` props でアイコンを右に配置するのは非推奨

参照元：レイアウト > デフォルトの開閉状態「レイアウト > デフォルトの開閉状態」の本文へ移動

Avoid
ユーザーの操作や閲覧が必ず必要な、重要性の高い情報を AccordionPanel で隠さない
- デフォルトで閉じる使い方の例: 一部のユーザーしか利用しない機能（例: 高度な設定など）を隠し画面の表示要素をシンプルに保ちたい場合
- デフォルトで閉じる使い方の例: 見出しを並べ、ユーザーに情報全体の構造を把握させたい場合

参照元：アクセシビリティ > ユーザーが操作していないリストを勝手に閉じない「アクセシビリティ > ユーザーが操作していないリストを勝手に閉じない」の本文へ移動

Must
`expandableMultiply` props は `expandableMultiply={true}` に指定する
- `expandableMultiply={false}` だと、1つのリストを展開するとすでに展開している別のリストが同時に閉じ、ユーザーが予測・意図していない動きが発生するため非推奨