ナビゲーション
Pagination
ページ送り。現在のページがどこかを示し、最初や最後のページでは送りの矢印を押せなくします。読み上げソフトにも今のページが伝わります。
ReactVueWeb Components
Storybook で見る プレイグラウンド
使用例
<Pagination count={10} page={page} onChange={setPage} />設定できる項目
| 名前 | 型 | 既定値 | 説明 |
|---|---|---|---|
count 必須 | number | — | Total number of pages. |
page 必須 | number | — | Current page (1-based). |
onChange 必須 | (page: number) => void | — | Called with the next page when a control is activated. |
siblingWindow | number | 7 | Max number of numbered buttons to show (window). @default 7 |
showArrows | boolean | true | Show previous/next arrows. @default true |
label | string | Pagination | Accessible label for the nav landmark. @default 'Pagination' |
アクセシビリティ
- 文字と背景の明るさの差をしっかり取り、読みやすくしています。ライトでもダークでも、見やすさの国際基準 WCAG の最高ランク AAA（明るさの差が 7:1 以上）を満たします。
- マウスがなくても、キーボードだけですべての操作ができます。
- いまどこを操作しているかを示す枠（フォーカスの囲み）が、常にはっきり見えます。
- 利用者が「画面の動きを減らす」設定にしているときは、過剰なアニメーションを止めます。
どのコンポーネントも、だれにとっても使いやすいように、見やすさの国際基準 WCAG の最高ランク AAA（WCAG 2.1 AAA）を満たすよう作っています。