コンポーネント一覧
Pagination
一覧は 1 画面で読み切れる件数で切る。無限スクロールは読み終わりが分からず、業務の一覧では戻れないことが嫌われる。
デモ
使い分け
こうする
- 1 ページを読み切れる件数（20〜50 件）で切る
- 現在のページを URL に載せる。戻る・共有ができる
こうしない
- 無限スクロールと併用しない。読み終わりが分からなくなる
- 総ページ数が 1 のときに表示しない
Props
| 名前 | 型 | 説明 |
|---|---|---|
| size | 'sm' | 'md' | 'lg' | |
| radius | 'none' | 'sm' | 'md' | 'lg' | 'full' | |
| total * | number | 総ページ数 |
| page | number | 現在のページ（1 始まり）。制御したい場合に使う |
| defaultPage | number | |
| onChange | (page: number) => void | |
| siblingCount | number | 現在ページの両隣に出す数。既定は 1 |
| boundaryCount | number | 先頭と末尾に必ず出す数。既定は 1 |
| isDisabled | boolean | |
| aria-label | string | `nav` の名前。1 ページに複数置くときに区別する。既定は「ページ送り」 |
| classNames | ClassNames<typeof paginationSlots> |
Slot
構成部位に data-slot が出力されます。 CSS の上書きやテストはこれを狙ってください。
- root必須
- list必須
- item必須
- prev必須
- next必須
- ellipsis
アクセシビリティ
| キー | 動作 |
|---|---|
| Tab | ボタンを順に移動 |
| Enter / Space | そのページへ |
- 根要素は `nav` で名前を持つ（既定「ページ送り」）。現在ページは `aria-current="page"`。 前へ / 次へは端で無効になる。省略記号は読み上げの対象にしない。 各ボタンは Tab で辿れ、Enter / Space で押せる
- キーボードだけで操作できます。フォーカスリングはコントラスト比 3:1 以上です。
- 本文のコントラスト比は light / dark とも 4.5:1 以上を検査で保証しています。
prefers-reduced-motionが有効なときはアニメーションを行いません。