Text
fandhe-frontend-wireframe-ui の単一行テキスト部品です。画面設計図中の見出し・ラベル・短い文言を表す、非インタラクティブなローファイ部品で、複数行にわたるブロック本文を表現する Paragraph(wireframe-ui)とは、1 行固定表示かどうかで役割が異なります。API は text(content, size, bold) の 3 引数(詳細は下の引数表を参照)で、props 構造体は導入していません。
視覚的な参照元は blocks.pm の Text 部品ですが、ライセンス上の理由によりスクリーンショットは掲載していません(詳細は docs/design/wireframe-ui-architecture.md §2)。参照したい場合は外部リンク先を直接確認してください。
スタイル済みの実部品が必要な場合は、Text(Themes)を検討してください。
Demo
既定(Md)
見出しのダミーテキストです強調(Bold)
強調表示したいテキストですXs
極小サイズのテキストですSm
小サイズのテキストですLg
大サイズのテキストですXl
極大サイズのテキストです引数表
| 引数 | 型 | 既定値 | 説明 |
|---|---|---|---|
| content | &str | - | 表示する文言。1 行固定表示のため、幅を超える場合は CSS(text-overflow: ellipsis)で末尾が省略される。 |
| size | Size | Size::Md | サイズ段階(xs〜xl)。フォントサイズに反映される。 |
| bold | Bold | Bold(false) | true のとき太字バリアントにする。 |
原案差分メモ
- API は独自設計: blocks.pm の Figma プロパティ構成をそのまま転写せず、
docs/design/wireframe-ui-architecture.md§6 の Text/Paragraph 系共通規約(Size+Bold(bool) +Text(文字列) の 3 点セット)から独立設計しました(Paragraph(wireframe-ui)と同型の判断)。 - スクリーンショット非掲載:
docs/design/reference-screenshots/への blocks.pm 画像取り込みは #2602 で fail-closed に非掲載と確定しています。本ページも画像は置かず、上記の外部リンクのみで代替します。 - 1 行固定 + 省略記号:
contentに含まれる\nを改行として描画せず、white-space: nowrap+overflow: hidden+text-overflow: ellipsisのみで 1 行に固定表示します。幅を超える文言は末尾が省略記号で切り詰められます(white-space: pre-lineで複数行を許容する Paragraph とは対になる判断です)。 - ルート要素は
<span>: docs サイト骨格 CSS(.docs-content span)には詳細度の競合が無いため、.fw-wire-paragraph(<div>ルート)とは異なり<span>をそのまま採用できます(インラインの 1 行要素であることを示す意図も兼ねます)。 Bold軸のみでPrimaryは持たない: Text/Paragraph 系は表示状態軸を持たず、Boldのみで強調を表します(Annotation(wireframe-ui)がBoldを使わずPrimaryで強調を表すのとは対になる判断です)。- 非インタラクティブ:
role/aria-*/tabindexは一切付与せず、button/a[href]のような対話要素も出力しません(設計文書 §5/§7)。