コンポーネント一覧
Skeleton
最終的なレイアウトと同じ大きさにする。読み込み後にガタつくと Skeleton の意味がない。
デモ
使い分け
こうする
- 読み込み後のレイアウトと同じ形で置く
こうしない
- 0.3 秒で終わる読み込みに出さない。ちらつく
Props
| 名前 | 型 | 説明 |
|---|---|---|
| radius | 'none' | 'sm' | 'md' | 'lg' | 'full' | |
| classNames | ClassNames<typeof skeletonSlots> |
Slot
構成部位に data-slot が出力されます。 CSS の上書きやテストはこれを狙ってください。
- root必須
アクセシビリティ
- `aria-hidden` で支援技術には読ませない。読み込み中であることは Spinner か live region で別に伝える
- キーボードだけで操作できます。フォーカスリングはコントラスト比 3:1 以上です。
- 本文のコントラスト比は light / dark とも 4.5:1 以上を検査で保証しています。
prefers-reduced-motionが有効なときはアニメーションを行いません。