Skip to content
fandhe-frontend
GitHub

Avatar

プロフィール画像とフォールバック表示を切り替える部品です。fandhe-frontend-headless-uiavatar 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 自体はスタイルを持ちません。

Ada Lovelace

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
  fallback

API Reference

Arguments

NameTypeDefaultDescription
image: src&str画像 URL(avatar.rs:170-188、必須)。
image: alt&str代替テキスト(avatar.rs:170-188、必須。実質的なアクセシビリティ担保)。
image/fallback: statusImageStatusImageStatus::Loading画像読み込みステータス。Loaded のときのみ image が可視(avatar.rs:99-107,132-141)。
Avatar::new: initialImageStatusImageStatus::Loading状態機械の初期ステータス(avatar.rs:238-243)。

Data Attributes

PartAttributeObserved Values
fallbackdata-statehidden
imagedata-statevisible

Examples

Error fallback

画像読み込み失敗(ImageStatus::Error)時のイニシャル表示例です。

AL

Accessibility

WAI-ARIA

AttributeDescription
(該当なし)root/image/fallback は固有の role/aria-* を出力しない(avatar.rs 全文の非テスト行で role/aria- grep 0 件)。image パーツの alt テキストのみが代替情報を提供する。