Rich text
fandhe-frontend-wireframe-ui のリッチテキスト行部品です。アイコン + ラベル + 末尾アイコンを 1 行(または縦積み)で並べる非インタラクティブなローファイ・プレースホルダーで、「アイコン付き行」の配置イメージ提示を想定しています。API は rich_text(label, leading, trailing, size, bold, orientation) の 6 引数(詳細は下の引数表を参照)で、props 構造体は導入していません。
視覚的な参照元は blocks.pm の Rich text 部品ですが、ライセンス上の理由によりスクリーンショットは掲載していません(詳細は docs/design/wireframe-ui-architecture.md §2)。参照したい場合は外部リンク先を直接確認してください。
Primitives・Themes には同名の "Rich text" 部品はありません(本部品は fandhe-frontend-wireframe-ui 固有です)。実際に操作可能なリンク行・ボタンが必要な場合は Link(Themes) や Button(Themes) を検討してください。
Demo
既定(アイコンなし)
設定
先頭アイコン
設定
末尾 caret
詳細を見る
先頭・末尾の両方
アカウント設定
Bold(true)
重要な項目
Orientation::Vertical
縦積み表示
Sm
小サイズの行
Lg
大サイズの行
引数表
| 引数 | 型 | 既定値 | 説明 |
|---|---|---|---|
| label | &str | - | 必須のラベル文言。 |
| leading | Option<Node> | None | 先頭スロット。icon::<name>(size) の戻り値を渡す。None のときは出力されない。 |
| trailing | Option<Node> | None | 末尾スロット。leading と同じ規約。None のときは出力されない。 |
| size | Size | Size::Md | サイズ段階(xs〜xl)。フォントサイズに反映される。 |
| bold | Bold | Bold(false) | true のときラベルを太字にする。 |
| orientation | Orientation | Orientation::Horizontal | Horizontal は横並び、Vertical はスロット・ラベルを縦積みにする。 |
原案差分メモ
- API は独自設計: blocks.pm の Figma プロパティ構成をそのまま転写せず、
docs/design/wireframe-ui-architecture.md§6 の Text/Paragraph 系変換規約(Size+Bold+ テキストの 3 点セット)と §11.4 のleading/trailingOption<Node>スロット規約を組み合わせて独立設計しました。 - スクリーンショット非掲載:
docs/design/reference-screenshots/への blocks.pm 画像取り込みは #2602 で fail-closed に非掲載と確定しています。本ページも画像は置かず、上記の外部リンクのみで代替します。 Orientationは既存の共通型: stack/divider/tabs と共用するprops::Orientation(Horizontal/Vertical)をそのまま流用しており、blocks.pm 固有のプロパティ名を転写したものではありません。Bold/Orientationの CSS は本部品スコープで初めて宣言: 両 class はprops.rsが class 名のみを定義していましたが、横断 CSS(tokens::css/size::css/css::PARTS)に対応する宣言が存在しませんでした(Annotation はBoldを意図的に不採用だったため未消費)。本部品が両 class の最初の消費者となり、docs/design/wireframe-ui-architecture.md§10「部品 CSS は自分のルート配下のみ」に従い部品スコープで宣言しています。- 非インタラクティブ:
role/aria-*/tabindexは一切付与せず、button/a[href]のような対話要素も出力しません。末尾アイコンは装飾であり、遷移を意味しません(設計文書 §5/§7)。