Avatar
プロフィール画像とフォールバック表示を切り替える部品です。fandhe-frontend-headless-ui の avatar mod は画像読み込みステータス(loading/loaded/error)を管理する状態機械を提供し、Root / Image / Fallback の 3 anatomy パーツで構成されます。Themes 版と異なりスタイル(外形・サイズ)は一切持たず、data-state による表示切り替えのみを担います。
スタイル済みの表示例は Avatar を参照してください。
関連 API: fandhe-frontend-headless-ui API
Demo
枠線・余白は docs サイト側のデモ枠であり、fandhe-frontend-headless-ui 自体はスタイルを持ちません。
Features
- 画像読み込みステータス 3 値(ImageStatus::Loading/Loaded/Error)を管理する状態機械 Avatar を提供する(avatar.rs:94-141)。
- Root / Image / Fallback の 3 anatomy パーツで構成し、Loaded のときのみ image を表示、それ以外は fallback を表示する安全側の既定(avatar.rs:132-141,152-207)。
- image パーツは alt テキストを必須引数として要求することが実質的なアクセシビリティ担保であり、専用の role/aria-* は付与しない(avatar.rs:37-43)。
Anatomy
root
image
fallbackAPI Reference
Arguments
| Name | Type | Default | Description |
|---|---|---|---|
| image: src | &str | 画像 URL(avatar.rs:170-188、必須)。 | |
| image: alt | &str | 代替テキスト(avatar.rs:170-188、必須。実質的なアクセシビリティ担保)。 | |
| image/fallback: status | ImageStatus | ImageStatus::Loading | 画像読み込みステータス。Loaded のときのみ image が可視(avatar.rs:99-107,132-141)。 |
| Avatar::new: initial | ImageStatus | ImageStatus::Loading | 状態機械の初期ステータス(avatar.rs:238-243)。 |
Data Attributes
| Part | Attribute | Observed Values |
|---|---|---|
| fallback | data-state | hidden |
| image | data-state | visible |
Examples
Error fallback
画像読み込み失敗(ImageStatus::Error)時のイニシャル表示例です。
Accessibility
WAI-ARIA
| Attribute | Description |
|---|---|
| (該当なし) | root/image/fallback は固有の role/aria-* を出力しない(avatar.rs 全文の非テスト行で role/aria- grep 0 件)。image パーツの alt テキストのみが代替情報を提供する。 |