Skip to content
fandhe-frontend
GitHub

Avatar

fandhe-frontend-pre-styled-ui の avatar mod が提供するスタイル済み Avatar 部品です。

ユーザーやチームの識別に使うアイコン画像・イニシャル表示部品です。ImageStatus（Loading/Loaded/Error）に応じて image パーツと fallback パーツの表示・非表示を CSS の data-state セレクタで切り替えます。

Avatar の Demo は ImageStatus を固定し、画像読み込み成功時の表示と フォールバック（イニシャル等）表示の両方を掲示しています。

関連 API: fandhe-frontend-pre-styled-ui API / fandhe-frontend-headless-ui API

Demo

size（Sm/Md/Lg）・shape（Circle/Rounded/Square）の 2 軸を持つユーザー画像表示。画像読み込み状態（ImageStatus）を固定し、Error 時はイニシャルのフォールバック表示、Loaded 時は画像表示を掲示します。

FT
FT
FT
Fandhe Team
Fandhe Team
Fandhe Team

Features

  • AvatarShape（Circle/Rounded/Square、crates/pre-styled-ui/src/avatar.rs:98）で外形を切り替える
  • ImageStatus に連動して image/fallback パーツの表示・非表示を CSS の [data-state="hidden"] で切り替える（avatar.rs:291-297）
  • image パーツは alt テキストを必須引数として要求する（avatar.rs 内 image 再エクスポート）

Anatomy

root
  image
  fallback

API Reference

Arguments

NameTypeDefaultDescription
shapeAvatarShapeCircle外形（avatar.rs:98-106、#[default] は Circle）。

Data Attributes

PartAttributeObserved Values
fallbackdata-statehidden, visible
imagedata-statehidden, visible

Examples

Fallback

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

FT

Accessibility

WAI-ARIA

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