Annotation
fandhe-frontend-wireframe-ui の注釈ボックス部品です。太字タイトル + 任意の説明文を持つ非インタラクティブなローファイ・プレースホルダーで、画面設計図の余白に設計意図を書き込む用途を想定しています。API は annotation(title, description, size, primary) の 4 引数(詳細は下の引数表を参照)で、props 構造体は導入していません。
視覚的な参照元は blocks.pm の Annotation 部品ですが、ライセンス上の理由によりスクリーンショットは掲載していません(詳細は docs/design/wireframe-ui-architecture.md §2)。参照したい場合は外部リンク先を直接確認してください。
Primitives・Themes には同名の "Annotation" 部品はありません(本部品は fandhe-frontend-wireframe-ui 固有です)。実際に操作可能な注釈・ツールチップが必要な場合は Tooltip(Primitives) を検討してください。
Demo
既定(Md・description なし)
設計メモ
description あり
配置意図
この余白はナビゲーションの折り返し確認用のプレースホルダーです。
強調(Primary)
要確認
この値は仮のダミーテキストです。
Sm
小サイズの注釈
Lg
大サイズの注釈
引数表
| 引数 | 型 | 既定値 | 説明 |
|---|---|---|---|
| title | &str | - | 太字で表示する必須のタイトル文言。 |
| description | Option<&str> | None | 省略可能な説明文。None のときはパート要素自体が出力されない。 |
| size | Size | Size::Md | サイズ段階(xs〜xl)。フォントサイズに反映される。 |
| primary | Primary | Primary(false) | true のとき強調(反転色)バリアントにする。 |
原案差分メモ
- API は独自設計: blocks.pm の Figma プロパティ構成(
Type/Emphasis相当のトグル群)をそのまま転写せず、docs/design/wireframe-ui-architecture.md§6 の汎用変換規約(Size軸 + 強調 bool + テキスト + 省略可能テキスト)から独立設計しました。 - スクリーンショット非掲載:
docs/design/reference-screenshots/への blocks.pm 画像取り込みは #2602 で fail-closed に非掲載と確定しています。本ページも画像は置かず、上記の外部リンクのみで代替します。 - 配色は黒塗り二値ではなく反転: blocks.pm の原案に相当する黒塗りプレースホルダーを機械的に再現するのではなく、
Primary(true)指定時のみ背景・文字色を反転するグレースケール配色を採用しています(docs/design/wireframe-ui-architecture.md§3「黒塗り二値を強制せず読みやすさ優先」の判断軸)。反転時の説明文には--fw-wire-ink-mutedではなく--fw-wire-fill(明るいトークン)を使い、暗地上でのコントラスト不足を避けています。 - 非インタラクティブ:
role/aria-*/tabindexは一切付与せず、button/a[href]のような対話要素も出力しません(設計文書 §5/§7)。