Skeleton
テキスト、長方形、円の形状でレイアウトを保つローディングプレースホルダーです。
主なプロパティ
shape は text、rectangle、circle を受け取り、既定値は text です。TRSkeleton は既定でシマーを表示し、静的なプレースホルダーには animate={false} を設定します。サイズはレイアウトまたは style から決まります。
インストール
pnpm add @tinyrack/ui長い行はコード領域を横にスクロールして確認できます。
スタイル
@import '@tinyrack/ui/components/skeleton.css';長い行はコード領域を横にスクロールして確認できます。
インポート
import { TRSkeleton } from '@tinyrack/ui/components/skeleton';長い行はコード領域を横にスクロールして確認できます。
プレイグラウンド
使用方法
例
1 つのローディング状態と装飾用の子要素 パーマリンク
ラベルのないスケルトンは既定で aria-hidden です。ローディング状態を通知する必要がある場合は、1 つの領域にアクセシブルなラベルを設定します。
API
TRSkeleton はネイティブ div の props、イベント、スタイル、React 19 の ref を転送します。
| プロパティ | 型 | 既定値 | 用途 |
|---|---|---|---|
animate | boolean | true | シマーアニメーションを有効化 |
shape | 'text' | 'rectangle' | 'circle' | 'text' | 既定の寸法と角丸を選択 |
ラベルのないスケルトンには aria-hidden="true" が設定されます。aria-label、aria-labelledby、aria-live、aria-busy、または role="status" を追加すると、1 つのライブ領域として公開されます。ユーザーがモーションを減らす設定を選んでいる場合、シマーは自動的に停止します。
| CSS トークン | 既定値 | 用途 |
|---|---|---|
--tr-skeleton-fill | --tinyrack-skeleton-fill | プレースホルダーの塗り |
--tr-skeleton-highlight | --tinyrack-skeleton-highlight | シマーのハイライト |
--tr-skeleton-height | 形状レシピ | プレースホルダーの高さ |
--tr-skeleton-circle-size | --tinyrack-space-3xl | 円の幅と高さ |
--tr-skeleton-radius | 形状レシピ | 角丸 |
--tr-skeleton-duration | --tinyrack-duration-loading | シマーの継続時間 |
--tr-skeleton-easing | --tinyrack-ease-linear | シマーのイージング |