kaze風
List
アイテム一覧を表示するリストコンポーネント。アイコン・説明・アクション付き。
プレビュー
基本リスト（区切り線あり）
- お気に入り機能よく使うアイテムをブックマークできます新着
- 設定アプリケーションの設定を変更
- チームメンバーメンバーの管理と招待5人
インタラクティブ
- クリック可能なアイテム
- ホバーで背景が変わります
箇条書き
- シンプルなテキストリスト
- マーカー付きの箇条書き
- ドキュメントや説明文に最適
番号付き
- アカウントを作成する
- プロフィールを設定する
- チームメンバーを招待する
使いどころ
使う場面
- 同じ種類の項目を縦に並べる（メンバー、通知、設定項目、ファイルなど）。各行にアイコンやアバター（leading）、状態や操作（trailing）、補足（description）を付けられる
- 順番に意味があるときは marker="decimal" で <ol> にする。手順や順位が該当する
- 行全体を押せるようにするときは interactive を付け、遷移なら asChild で <a> を包む
使わない場面
- ラベルと値の組（氏名: 相楽 実咲、プラン: Pro など）。DescriptionList を使う
- 列ごとに比較・並べ替えるデータ。Table を使う
- 出来事を時系列で追う履歴。Timeline を使う
- 行ごとに別々の操作を持つメニュー。Dropdown を使う
使い方
{/* アイコン付きリスト */}
<List divided>
<ListItem
leading={<Star size={16} />}
title="お気に入り機能"
description="よく使うアイテムをブックマーク"
trailing="新着"
/>
<ListItem
leading={<Settings size={16} />}
title="設定"
description="アプリの設定を変更"
/>
</List>
{/* 箇条書き */}
<List marker="disc">
<ListItem title="シンプルなテキスト" />
<ListItem title="マーカー付き箇条書き" />
</List>
{/* 番号付き */}
<List marker="decimal">
<ListItem title="手順1" />
<ListItem title="手順2" />
</List>プロパティ
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
divided | boolean | false | アイテム間に区切り線を表示（List） |
marker | "disc" | "decimal" | "none" | なし | リストマーカーのスタイル（List） |
children必須 | ReactNode | なし | ListItem の並び |
leading | React.ReactNode | なし | 左側のアイコンなど（ListItem） |
title | React.ReactNode | なし | アイテムのタイトル（ListItem） |
description | React.ReactNode | なし | タイトル下の説明文（ListItem） |
trailing | React.ReactNode | なし | 右側の補足テキストやアイコン（ListItem） |
interactive | boolean | false | ホバーエフェクトを有効化（ListItem） |
型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。
キーボード操作
| キー | 動作 |
|---|---|
| Tab | interactive の行がリンクなら、行ごとにフォーカスを移す |
| Enter | フォーカスしたリンクを開く |
アクセシビリティ
- marker が decimal のとき <ol>、それ以外は <ul> で出力され、項目数が読み上げられる
- interactive だけでは行は押せない。クリックの処理を付けるなら <button> を中に置くか、asChild で <a> にする。<li> に onClick だけ付けてもキーボードで操作できない
- asChild のときは <li> の中に <a> が入る。リンクの名前は title と description をまとめて読まれるので、title は単独で意味が通る言葉にする
文言
- title は項目名を短く、description は title にない補足を書く。同じ内容を繰り返さない
- trailing に置くバッジや日付は、短く揃える。行ごとに長さがばらつくと崩れる