フィードバック
Skeleton
読み込み中に、中身が入る場所をぼんやり示す仮表示。文字・丸・四角の形を、淡く光るアニメーションで描きます。
ReactVueWeb Components
Storybook で見る プレイグラウンド
使用例
<Skeleton variant="circle" width={40} height={40} />
<Skeleton variant="rect" width="70%" height="1rem" />
<Skeleton lines={3} />設定できる項目
| 名前 | 型 | 既定値 | 説明 |
|---|---|---|---|
variant | SkeletonVariant | text | Shape. @default 'text' |
width | number | string | — | CSS width (e.g. '60%', 200). |
height | number | string | — | CSS height (e.g. '1rem', 40). |
lines | number | — | Render N stacked text lines (text variant only). |
animated | boolean | true | Shimmer animation. @default true |
アクセシビリティ
- 文字と背景の明るさの差をしっかり取り、読みやすくしています。ライトでもダークでも、見やすさの国際基準 WCAG の最高ランク AAA（明るさの差が 7:1 以上）を満たします。
- マウスがなくても、キーボードだけですべての操作ができます。
- いまどこを操作しているかを示す枠（フォーカスの囲み）が、常にはっきり見えます。
- 利用者が「画面の動きを減らす」設定にしているときは、過剰なアニメーションを止めます。
どのコンポーネントも、だれにとっても使いやすいように、見やすさの国際基準 WCAG の最高ランク AAA（WCAG 2.1 AAA）を満たすよう作っています。