リソースリスト （ 概要 ）
リソースリストは、共通した構成のオブジェクトのリストを表示します。
複数のオブジェクトの状態一覧をリストで表示したいといった要求に対応します。
ユースケース
- 複数の情報から構成されるアイテムを一覧表示するとき
- 見出しやデスクリプションなどの複数の情報を1つのアイテムとしてまとめ、それらをリストとして提示したい場合に使用します。各アイテムの詳細情報へのリンクや、サブメニューなども設定できます。また、レイアウトによってはカードを使うこともできます。
- 各アイテムに対する個別のアクションを提供するとき
- 各アイテムに対するダウンロードや削除といった個別のアクションを提供したい場合に使用します。
- アイテムを択一選択または複数選択させたいとき
- リストの中から、複数のアイテムを択一選択または複数選択し、選択したアイテムに対する操作を行いたい場合に使用します。
注意が必要なケース
- データの比較や分析にはテーブルを使う
- 各項目の値を比較したり、複数の列で構成されるデータを分析したりする場合は、行と列を使ったテーブルのほうが適しています。リソースリストは各アイテムが独立した情報として提示される場合に使用してください。
- シンプルな項目の列挙には箇条書きリストを使う
- タイトルだけを列挙する場合や、複数の属性を持たないシンプルな項目を並べる場合は、箇条書きリストを使用してください。リソースリストは各アイテムが複数の情報で構成される場合に使用します。
- 名前と説明のペアだけを示す場合は説明リストを使う
- 用語と説明、名前と値などのペアを並べるだけの場合は、説明リストを使用してください。複数の情報や操作を含むアイテムを一覧表示する場合は、リソースリストを使用します。
- アイテム全体をクリッカブルエリア（フォーカス可能エリア）にした場合は、中にリンクやボタンを置かない
- リソースリストは、アイテム全体をクリッカブルエリア（フォーカス可能エリア）にすることができます。このとき、アイテムの中に別のリンクやボタンを置かないでください。押せる領域が重なり、意図しないほうを押してしまうことがあります。スクリーンリーダーでも、操作を正しく伝えられなくなります。アイテム内に別のリンクやボタンを置く場合は、アイテムのタイトルをリンクや選択の対象にしてください。
関連コンポーネント
各種リソース
| 種別 | リソース | 状態 |
|---|---|---|
| デザイン | Figmaデザインデータ（v2） | 提供中 |
| HTML版実装 | ソースコード（GitHub） | 提供中 |
| サンプル（Storybook） | 提供中 | |
| React版実装 | ソースコード（GitHub） | 提供中 |
| サンプル（Storybook） | 提供中 |