コンポーネント
List
項目を縦に並べる。区切り線も付けられる
行頭の記号は既定で出しません
素の ul の点や数字は初期化で消えます。戻すのは選んだときだけにしています——
並べたものが文章とは限らないためです（ラベルの一覧、設定の行）。
<List>…</List> {/* 記号なし */}
<List marker="bullet">…</List> {/* 点 */}
<List ordered marker="number">…</List> {/* 数字 */}順序があるリストには ordered を付けてください
ordered を付けると ol になります。見た目ではなくマークアップが変わるので、
読み上げが「1番目の項目」のように順序を伝えられるようになります。
数字が見えているだけでは足りません。 marker="number" は見た目だけを変え、
ordered はマークアップを変えます。順序のあるリストには両方付けてください。
区切り線は各項目の上辺に引かれます
先頭の項目だけ線が付きません。 リストの上端に線が残ると、外側に枠があるように 見えてしまうためです。
線を付けると項目どうしの余白は詰まります——線が区切りの役目を担うので、 余白と二重にしません。
<List separated>
<ListItem separated>設定の行</ListItem>
<ListItem separated>線で区切られています</ListItem>
</List>枠から項目へは自動で降りません
separated は枠と項目の両方に書きます。li は枠の直下とは限らず、
間に何かを挟んだときに静かにずれるためです。
項目の中は自由です
ListItem は li を作るだけです。リンクにしたいときは中にリンクを置いてください——
li そのものを差し替えると、並びの意味が壊れます。
3つの状態
通常・空・エッジケースの3つは、どのコンポーネントにも必ずあります。
通常default.tsx
通常。行頭の記号は既定で出さない。
- 印の無い並び
- 枠は縦に並べて間を空けるだけ
- 点の付いた並び
- 文章の中で使う
- 順序のある並び
- 読み上げも順序を伝えます
空empty.tsx
空。項目が無いとき。
- まだ何もありません
エッジケースedge.tsx
エッジケース。線で区切るときと、項目の中身が長いとき。
- 設定の行
- 線で区切られています
- 最初の項目だけ上に線がありません
- 項目の中身が長いとき。折り返しても印の位置は動かず、2行目以降は印の右側に揃います。 Supercalifragilisticexpialidocious のような長い語も枠を破りません。
props
Prop
Type
型と説明はコンポーネントのソースから抽出しています。既定値は出していません——cva の defaultVariants は 署名に現れないので、表に出すと「引数のデフォルトが書かれているものだけ」になり、嘘になります。