Skeleton

Stablev0.3.0

コンテンツ読み込み中のプレースホルダー。ユーザーにローディング状態を視覚的に伝えます。

基本的な使い方

基本的なスケルトン要素

tsx

class="token keyword">import { Skeleton } class="token keyword">from class="token keyword">class="token string">"@/components/ui";

<class="token tag">Skeleton class="token keyword">class=class="token keyword">class="token string">"h-class="token number">4 w-full" />
<class="token tag">Skeleton class="token keyword">class=class="token keyword">class="token string">"h-class="token number">4 w-class="token number">3/class="token number">4" />
<class="token tag">Skeleton class="token keyword">class=class="token keyword">class="token string">"h-class="token number">4 w-class="token number">1/class="token number">2" />

プリセットコンポーネント

よく使うパターンのプリセット

SkeletonText

SkeletonAvatar

SkeletonButton

tsx

class="token keyword">import {
  SkeletonText,
  SkeletonAvatar,
  SkeletonButton,
} class="token keyword">from class="token keyword">class="token string">"@/components/ui";

<class="token tag">SkeletonText lines={class="token number">3} />
<class="token tag">SkeletonAvatar size=class="token keyword">class="token string">"lg" />
<class="token tag">SkeletonButton size=class="token keyword">class="token string">"md" />

SkeletonCard

カード形式のスケルトン

tsx

<class="token tag">SkeletonCard />

カスタムレイアウト

様々なUIパターンのスケルトン

アニメーションなし

静的なスケルトン表示

tsx

<class="token tag">Skeleton class="token keyword">class=class="token keyword">class="token string">"h-class="token number">4 w-full" animate={class="token keyword">false} />

実際のコンテンツとの比較

スケルトンから実コンテンツへの遷移イメージ

Loaded

田中優子

プロダクトマネージャー

新しいプロジェクトの企画書を作成しました。チームメンバーの皆さん、レビューをお願いします。

Props API

Prop	Type	Default	Description
`class`	`string`	-	カスタムCSSクラス（サイズ指定など）
`animate`	`boolean`	`true`	シマーアニメーションを有効化

Accessibility

aria-hidden='true' で読み上げを無効化
role='presentation' で装飾的要素として扱う
実際のコンテンツがロードされたら適切に置き換える
アニメーションは prefers-reduced-motion を尊重