Skip to content
fandhe-frontend
GitHub

Status

fandhe-frontend-pre-styled-uistatus mod が提供するスタイル済み Status 部品です。

オンライン/オフライン等の状態を示す最小部品です。colorPalette 軸でセマンティック色を選択でき、root/indicator の 2 パーツのみで構成します。role="status" は付与しない設計で、非同期の状態遷移を伴う場合は呼び出し側が明示的に role/aria-live を足す契約です。

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

Demo

ドット(indicator)+ ラベルで状態を示す静的表示。colorPalette で色を切り替えます。

AccentInfoSuccessWarningDanger

Features

  • colorPalette 軸(crates/pre-styled-ui/src/status.rs:77-81)でセマンティック色を選択する
  • root/indicator の 2 パーツのみで構成する最小部品
  • role="status"(WAI-ARIA live region)は付与しない設計(status.rs:9-12、非同期の状態遷移がある場合は呼び出し側が明示的に足す)

Anatomy

root
  indicator

API Reference

Arguments

NameTypeDefaultDescription
paletteColorPaletteAccentcolorPalette 軸(status.rs:77-90)。

CSS Variables

VariableDefault
--fandhe-status-dot-size0.5rem

Examples

Success

Success パレットで "Online" を表示する例です。

Online

Accessibility

WAI-ARIA

AttributeDescription
(該当なし)role="status" は付与しない設計。非同期の状態遷移を伴う場合は呼び出し側が明示的に role/aria-live を足す契約(status.rs:9-12、テストで role= の非出現を固定)。