Avatar
fandhe-frontend-wireframe-ui のアバタープレースホルダーです。正方形または円形の枠の中に人物の線画(既定)を置き、実際のアバター画像の配置イメージを示す非インタラクティブな部品です。API は avatar(content, size, circle) の 3 引数(詳細は下の引数表を参照)で、props 構造体は導入していません。
視覚的な参照元は blocks.pm の Avatar 部品ですが、ライセンス上の理由によりスクリーンショットは掲載していません(詳細は docs/design/wireframe-ui-architecture.md §2)。参照したい場合は外部リンク先を直接確認してください。
本部品は表示専用のため <img> は出力せず、画像 URL を受け取る API も持ちません。実際に画像を表示する部品が必要な場合は Avatar(Themes) または Avatar(Primitives) を検討してください。
Demo
既定(正方形・人物線画)
円形
スロット差し替え(画像アイコン)
スロット差し替え(イニシャル)
AB
サイズ比較(Xs〜Xl、円形)
引数表
| 引数 | 型 | 既定値 | 説明 |
|---|---|---|---|
| content | Option<Node> | None | 省略可能なコンテンツスロット。None のときは既定の人物線画(icon::user)にフォールバックする。 |
| size | Size | Size::Md | サイズ段階(xs〜xl)。枠の寸法に反映される。 |
| circle | bool | false | true のとき円形(fw-wire-avatar-circle)バリアントにする。 |
原案差分メモ
- API は独自設計:
docs/design/wireframe-ui-architecture.md§4・§6 の Figma プロパティ変換規約から独立設計しました。 - サイズは 5 段階へ畳み込み: 原案は XXL までの段階を想定していますが、本クレート共通の
Size5 段(xs〜xl)へ畳み込んでいます(他部品と同じ判断)。 content: Noneは人物線画へフォールバック(Option<Node>スロット規約 §11.4 からの意図的な逸脱):crate::iconのOption<Node>アイコンスロット規約は「Noneならスロット要素を出力しない」を原則としますが、本部品は中身のないアバター枠がワイヤーフレームとして意味を持たないため、contentがNoneのとき既定で人物線画(icon::user)を差し込みます。Some(node)を渡した場合はそのノードをそのまま子要素にします(画像アイコンやイニシャルテキストへの差し替えが可能です)。- 円形は部品固有の修飾 class:
circle: boolはcrate::frameのbordered: boolと同型の判断で、部品固有の修飾 class(fw-wire-avatar-circle)として表現します。props.rsに新しい型は追加していません。 <img>は出力しない: ルートはdivとし、src/href/styleは一切出力しません(同文書 §7 の非対話制約)。画像 URL を受け取る API も設けていません(外部リソース読み込みの経路を作らないため)。- スクリーンショット非掲載:
docs/design/reference-screenshots/への blocks.pm 画像取り込みは #2602 で fail-closed に非掲載と確定しています。本ページも画像は置かず、上記の外部リンクのみで代替します。 - 配色はグレースケール: 黒塗り二値ではなく
--fw-wire-fill-subtle(背景)・--fw-wire-ink-muted(グリフ色)・--fw-wire-line(枠線)のトークンを使います。