Divider
fandhe-frontend-wireframe-ui の区切り線部品です。水平/垂直の線に、任意で中央へラベルを置ける非インタラクティブなローファイ・プレースホルダーで、セクション間・項目間の視覚的な区切りを表現する用途を想定しています。API は divider(label, size, orientation) の 3 引数(詳細は下の引数表を参照)で、props 構造体は導入していません。
視覚的な参照元は blocks.pm の Divider 部品ですが、ライセンス上の理由によりスクリーンショットは掲載していません(詳細は docs/design/wireframe-ui-architecture.md §2)。参照したい場合は外部リンク先を直接確認してください。
Primitives・Themes には同名の "Divider" 部品はありません(本部品は fandhe-frontend-wireframe-ui 固有です)。実際に操作可能・アクセシブルな区切り線(role="separator" + aria-orientation 連動)が必要な場合は Separator(Themes) を検討してください。
Demo
既定(水平・ラベルなし)
ラベルあり
または
垂直
Sm
Sm
Lg
Lg
引数表
| 引数 | 型 | 既定値 | 説明 |
|---|---|---|---|
| label | Option<&str> | None | 線の中央に置く省略可能なラベル文言。None のときはラベルパート要素自体が出力されない。 |
| size | Size | Size::Md | サイズ段階(xs〜xl)。ラベルのフォントサイズと垂直方向の最小長さに反映される。線の太さは固定で連動しない。 |
| orientation | Orientation | Orientation::Horizontal | 水平/垂直。垂直時はルートが縦積みのフレックスコンテナになる。 |
原案差分メモ
- API は独自設計: blocks.pm の Figma プロパティ構成(
Size/Label/Vertical相当のトグル群)をそのまま転写せず、docs/design/wireframe-ui-architecture.md§6 の汎用変換規約(Size軸 + 方向 + 省略可能テキスト)から独立設計しました。 - スクリーンショット非掲載:
docs/design/reference-screenshots/への blocks.pm 画像取り込みは #2602 で fail-closed に非掲載と確定しています。本ページも画像は置かず、上記の外部リンクのみで代替します。 hrは使わない: 垂直・ラベル付きを表現できないうえ、variant によってタグが変わると「role/data-/style不在」契約テストが複雑化するため、ルートはdiv+::before/::after擬似要素で線を描く構成にしました。role="separator"も付与しません(role/aria-*を一切出力しない本クレートの方針、設計文書 §5/§7)。Sizeの意味: ラベルのフォントサイズと垂直方向の最小長さ(--fw-wire-control-size)に反映されますが、線の太さ(--fw-wire-line-width)は固定でsizeに連動しません。- 非インタラクティブ:
role/aria-*/tabindexは一切付与せず、button/a[href]のような対話要素も出力しません(設計文書 §5/§7)。