Skeleton

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

読み込み中のコンテンツ占位表示部品です。SkeletonVariant（Text/Circle/Rect）で形状を切り替え、SkeletonAnimation（Pulse/Shine/None）でアニメーション種別を切り替えられます。常に aria-hidden="true" を固定付与し、読み込み完了後は呼び出し側が実コンテンツへ差し替える契約です。Avatar / Card / Text / Form / Table の合成パターンは Examples 節を参照してください。

Demo

データ読み込み中のコンテンツ形状を模した占位要素。常に aria-hidden="true" を持ち、読み込み中であることをスクリーンリーダーへ伝える責務はコンテナ側（aria-busy）にあります。animation 軸（pulse/shine/none）でアニメーション種別を切り替えられ、prefers-reduced-motion: reduce ではいずれも停止します。イシュー #2050: card 等との合成例（下段）も掲示します。

Variant

Features

SkeletonVariant（Text/Circle/Rect、crates/pre-styled-ui/src/skeleton.rs:192-200）で占位形状を切り替える
SkeletonAnimation（Pulse/Shine/None、skeleton.rs:223-233、イシュー #1566）で第 2 軸のアニメーション種別を切り替える
常に aria-hidden="true" を固定付与する（skeleton.rs:420）
呼び出し側が偽装した aria-hidden（大文字小文字問わず）も除去し常時 true へ一本化する（skeleton.rs:420、回帰テストは skeleton.rs:484）
イシュー #2050 で shadcn/ui と突合、欠落 variant/state なし。shimmer は text 向け utility のため不採用、Card/Text/Form/Table 合成例を Examples へ追加

Anatomy

root

API Reference

Arguments

Name	Type	Default	Description
`variant`	`SkeletonVariant`	`Text`	占位形状（skeleton.rs:192-200、#[default] は Text）。
`animation`	`SkeletonAnimation`	`Pulse`	アニメーション種別（skeleton.rs:223-233、#[default] は Pulse、イシュー #1566）。

CSS Variables

Variable	Default
`--fandhe-skeleton-height`	`5rem`
`--fandhe-skeleton-shine-from`	`var(--fandhe-color-bg-muted)`
`--fandhe-skeleton-shine-to`	`var(--fandhe-color-bg-emphasized)`
`--fandhe-skeleton-size`	`2.5rem`

Examples

Circle

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

Avatar

shadcn/ui の Avatar 例に相当。Circle + 縦積み Text 2 本を横並びで組み合わせ、追加 API 不要で style 上書きのみで再現できます。

Card

shadcn/ui の Card 例に相当。card::header/card::body と組み合わせ、Rect の --fandhe-skeleton-height を auto へ上書きして aspect-ratio を効かせます。

Text

shadcn/ui の Text 例に相当。テキスト 3 本、最終行のみ幅を詰めて段落末尾らしさを表現します。

Form

shadcn/ui の Form 例に相当。ラベル + 入力の Rect 組を 2 つ縦積みし、末尾にボタン相当の Rect を置きます。

Table

shadcn/ui の Table 例に相当。table 部品は使わず、flex 行 5 本 × Text 3 本で再現します。

Accessibility

WAI-ARIA

Attribute	Description
aria-hidden="true"	常に固定付与される（呼び出し側の偽装値は除去、skeleton.rs:420、回帰テストは skeleton.rs:484）。