Skip to content
fandhe-frontend
GitHub

Skeleton

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

読み込み中のコンテンツ占位表示部品です。SkeletonVariant（Text/Circle/Rect）で形状を切り替え、常に aria-hidden="true" を固定付与します。読み込み完了後は呼び出し側が実コンテンツへ差し替える契約です。

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

Demo

データ読み込み中のコンテンツ形状を模した占位要素。常に aria-hidden="true" を持ち、読み込み中であることをスクリーンリーダーへ伝える責務はコンテナ側（aria-busy）にあります。prefers-reduced-motion: reduce ではパルスアニメーションを停止します。

Features

  • SkeletonVariant（Text/Circle/Rect、crates/pre-styled-ui/src/skeleton.rs:82-208）で占位形状を切り替える
  • 常に aria-hidden="true" を固定付与する（skeleton.rs:9, 202）
  • 呼び出し側が偽装した aria-hidden（大文字小文字問わず）も除去し常時 true へ一本化する（skeleton.rs:209-217, 262-266）

Anatomy

root

API Reference

Arguments

NameTypeDefaultDescription
variantSkeletonVariantText占位形状（skeleton.rs:82-208、#[default] は Text）。

CSS Variables

VariableDefault
--fandhe-skeleton-height5rem
--fandhe-skeleton-size2.5rem

Examples

Circle

アバター等の占位に使う Circle variant の例です。

Accessibility

WAI-ARIA

AttributeDescription
aria-hidden="true"常に固定付与される（呼び出し側の偽装値は除去、skeleton.rs:9, 202, 262-266）。