区切り線SeparatorBeta
コンテンツを視覚的・意味的に区切ります。
プレビュー
公開設定
公開前に内容を確認してください。
状態とバリエーション
垂直
ツールバーやメタ情報の短い区切りには vertical を使います。
下書き最終更新 5分前
意味のある区切りとして読ませる
既定では役割を持たないので読み上げに出ません。飾りではなく章の切れ目なら、呼ぶ側で role="separator" を足します。見た目は変わりません。
アカウント
通知
行と行のあいだだけに入れる
一覧で使うときは、行の数だけ引くのではなく先頭の行を飛ばします。末尾に線が余ると、続きがあるように見えます。
受付3人
調理5人
配達2人
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| orientation | "horizontal" | "vertical" | "horizontal" | 区切り線の向きです。 |
| className | string | - | horizontal は親幅いっぱいに広がります。長さは外側の max-w-* や className で制約します。 |
使い方
import { Separator } from "@gunjo/ui";
export function Example() {
return (
<div className="space-y-3">
<p className="text-sm font-medium">公開設定</p>
<Separator />
<p className="text-sm text-muted-foreground">公開前に内容を確認してください。</p>
</div>
);
}設計の判断
- 既定では読み上げに出ない。資料は「見た目だけの線は読み上げから飛ばす」「意味のある区切りだけ役割を持たせる」と書いています。GUNJO の Separator は素の
divを1本描くだけで、役割を持ちません。役割の無いdivは読み上げに出ないので、飾りとしては初めから正しい形です。意味のある区切りにしたいときだけ、呼ぶ側で役割を足します。 - 向きは2つしかなく、その名前は生成物から来る。
orientationは横と縦の2つで、この鍵は設計の元データから生成されたSeparatorVariantKeyです。既定も生成物のseparatorDefaultVariantKeyから取っています。ソースだけを直しても元データとずれない形にするためで、3つ目の向きを足すには元データの側から変えることになります。 - 縦線は高さを 1.5rem に決め打ちしてある。資料は「垂直の区切りはほぼ常に飾り」と書いています。GUNJO の縦線は
h-6固定で、親の高さいっぱいには伸びません。パンくずやメタ情報の並びで、文字の高さに添えて置くのが想定の使い方で、画面を左右に仕切る線としては作っていません。
いつ・なぜ使うか（UIXHERO）
「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。