よくあるリスト
リスト形式でオブジェクトを一覧表示するUIのパターンをまとめています。
SmartHRでは、リスト形式でオブジェクトを一覧表示するUIを「よくあるリスト」と呼びます。OOUIにおける「コレクション」と、コレクションに関連するアクションやフォームをまとめた総称を指します。
主に、デスクトップでよくあるテーブルを使って表示される情報を、モバイルで表示するために使います。
構成
よくあるリストは、次の要素で構成されています。必須項目以外は任意の表示項目です。
1. 見出し
よくあるリストの見出しです。
- Headingを使ってください。
- 多くの場合、
{オブジェクト名}という表記を採用します。
画面タイトルがよくあるリストの見出しを兼ねる場合は、見出しを省略できます。
ただし、後述のリスト操作エリアが生じる場合はリストの左上に不要な余白が生まれるため、見出しを省略できません。
2. リスト操作エリア
リストにオブジェクトを追加したり、オブジェクト全体を一括で変更するなどの、データの追加・一括変更などに関わる操作をまとめたエリアです。
このエリアは、リストを含むBase外の右上（見出しの右側）に配置します。
- Buttonや、DropdownMenuButtonを配置できます。
よくあるリストが主に想定しているモバイル環境では画面の幅が狭いことから、 ボタンは最大2つまでとします。- ラベルが長いボタンまたは、3つ以上の操作を表示したい場合は、DropdownMenuButtonを使います。
- ButtonとDropdownMenuButtonの両方を表示する場合は、Button→DropdownMenuButtonの順に配置します。
3. 一時操作エリア
リストのデータには影響しない一時的な操作のためのボタンやフォームをまとめたエリアです。リストの検索と絞り込みに使います。
リストを含むBase内の上部に配置します。
検索フォーム
SearchInputを使います。 キーボードのリターンキーが押されたら、検索処理を実行します。
絞り込みボタン
FilterDropdownを使います。 クリックすると、リストのオブジェクトを絞り込むオプションを表示します。
4. リスト
オブジェクトをリスト形式で垂直方向に積み重ねて表示します。
ページ内でよくあるリストのあとに表示されるコンテンツがある場合は、5件程度の項目を表示します。ページ内でよくあるリストのあとに表示されるコンテンツがない場合は、20件程度の項目を表示します。
オブジェクト名
オブジェクト個別の名前です。オブジェクトを識別するために必須要素として表示します。
Text（フォントサイズM、行送りNORMAL）を使います。
オブジェクトの情報
オブジェクトに付随する情報です。OOUIにおけるプロパティを指します。
Text（フォントサイズS、行送りTIGHT、色TEXT_GREY）を使います。
一覧でオブジェクトの情報を元にオブジェクト同士を比較したい場合、リストは不適切です。よくあるテーブルを使ってください。
よくあるリストが主に想定しているモバイル環境では表示領域が狭いことから、ステータスに加え、2行分の情報のみ表示できます。（2行に収まる範囲で、3つ以上の情報の表示も可能です。）- オブジェクトの情報にラベルが必要な場合は、
{ラベル}：{値}という形式で表示します。（例:「作成日：2025/01/01」） - 表示するオブジェクトの情報の種類と数は、リスト内で統一してください。
オブジェクトの操作
オブジェクトの操作の構成には次の2つのパターンがあります。どちらを採用するかはリスト内で統一してください。
オブジェクトが詳細ビューを持つ場合
リストの各項目に詳細ビューへ移動するリンクを設定します。
オブジェクト名やオブジェクトの情報を含む各項目の領域すべてがリンクであるため、リンク以外の操作は表示できません。詳細ビューに操作を表示してください。
オブジェクトが詳細ビューを持たない場合
リストの各項目に対する操作がある場合は、各項目の操作としてButtonや、DropdownMenuButtonを表示します。
よくあるリストが主に想定しているモバイル環境では画面の幅が狭いことから、 表示できるボタンはdefaultサイズのアイコンボタン1つです。アイコンだけでは意味が伝わりづらい操作や、複数の操作を表示したい場合は、DropdownMenuButtonを使います。
5. 「さらに表示」ボタン
さらに多くのオブジェクトを追加で読み込んで、表示するボタンです。表示している以上のオブジェクトがない場合には表示しません。
FaAngleDownIconをアイコン付き（左）（プレフィックス）に設定したTertiaryボタンを幅いっぱいに広げて使います。
ボタンが押されたら、最初に表示されていた件数と同じ件数を読み込み、リストの末尾に追加します。
レイアウト
デスクトップ
[WIP]
モバイル
要素間の余白
要素間の余白は以下のとおりです。（コンポーネント内の余白は省略）
基本的に余白の取り方/モバイルに従って配置しますが、オブジェクトが詳細ビューを持つ場合のリスト項目の右側のPaddingは0.5（8px）とします。
見出しとリスト操作エリアのレイアウト
多様な画面幅で見やすいレイアウトとなるよう、見出しとリスト操作エリアは、Sidebarを使って配置します。
リストの各項目をBaseでグルーピングするパターン
次のような場合、リストの各項目をBaseでグルーピングして表示できます。構成や種類に変更はありません。
- リストに表示する各項目の連続性が低く、表示の独立性を高めたい場合
- 例：ユーザー投稿の一覧
要素間の余白は以下のとおりです。記載のない余白は通常表示と同じです。（コンポーネント内の余白は省略）
種類
初期表示
オブジェクトの数が0件である初期状態の表示パターンは以下のとおりです。
- 見出し
- 表示の制約はありません。
- リスト操作エリア
- 表示の制約はありません。
- 一時操作エリア
- 一時操作エリアは表示しません。
- リスト
- リストは表示しません。
- 代わりにBase内部に、
{オブジェクト名}はありません。というメッセージと、オブジェクト追加を促すボタンを上下左右中央に表示します。- オブジェクト追加を促すボタンは、基本的にSecondaryボタンのサイズ小を使います。
- オブジェクト名が人を指す名詞などで「
ありません」がそぐわない場合は、オブジェクト名を明記しない「表示するデータはありません。」というメッセージを表示します。
- 「さらに表示」ボタン
- 「さらに表示」ボタンは表示しません。
検索結果なし
オブジェクトの検索結果や絞り込み結果が0件であった場合の表示パターンです。 検索結果のオブジェクト数は0件ですが、オブジェクト自体はリストに存在しています。
- 見出し
- 表示の制約はありません。
- リスト操作エリア
- 表示の制約はありません。
- 一時操作エリア
- 表示の制約はありません。
- リスト
- リストは表示しません。
- 代わりにBase内部に、
該当する{オブジェクト名}はありません。<br />別の条件を試してください。というメッセージを上下左右中央に表示します。
- 「さらに表示」ボタン
- 「さらに表示」ボタンは表示しません。
