リストListExperimental
マーカーや余白をカスタマイズできるセマンティックなリストです。
プレビュー
- 要件を確認する
- 必要な入力を揃える
- 保存して共有する
状態とバリエーション
チェック項目
完了済みや確認済みの項目を静的なマーカーとして明確にします。
- レビュー済み
- 検証済み
- 共有済み
順序付き
手順や優先順位を示す場合は ordered を使います。
- ファイルを選ぶ
- 内容を確認する
- アップロードする
区切り線付き
行ごとの情報を区切って見せたい静的なリストに使います。
- 公開前チェック
- アクセシビリティ確認
- 変更履歴を更新
任意アイコン
項目ごとに意味が違う場合は icon で個別のマーカーを渡します。
- 次の画面へ進む
- 保存済み
使い分け
List が扱うこと
List は ul / ol の意味、マーカー、余白、静的な区切り線を扱います。check は完了状態を保存する操作ではなく、説明用のマーカーです。
別コンポーネントにすること
TODO や完了操作が必要な行は Checkbox や Toggle を含む checkable な composition として設計します。List の marker だけで操作状態を表現しません。
List のプロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| variant | "unordered" | "ordered" | "none" | "unordered" | リストの意味と標準マーカーの扱いを指定します。 |
| marker | "dot" | "circle" | "check" | "number" | "none" | "dot" | 各項目に使う標準マーカーです。 |
| spacing | "default" | "tight" | "loose" | "default" | 項目間の縦余白です。 |
| divided | boolean | false | 項目間に区切り線を表示します。設定一覧や確認リストの静的な行表現に使います。 |
ListItem のプロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| marker | "dot" | "circle" | "check" | "number" | "none" | - | 項目ごとにマーカーを上書きします。 |
| icon | ReactNode | - | 任意のアイコンをマーカーとして表示します。 |
| children | ReactNode | - | リスト項目の本文です。 |
使い方
Loading...