Pagination

ページ分割されたコンテンツをナビゲートするページネーションコンポーネント。

GitHub でソースを見る

プレビュー

使いどころ

使う場面

  • 表や検索結果など、件数が多い一覧を、ページに分けて見せる
  • page と onPageChange で制御する。任意の初期ページだけ決めるなら defaultPage（非制御）
  • siblingCount（既定 1）で現在のページの前後に出す番号の数を調整する

使わない場面

  • ページが 2 つ以下のとき。「もっと見る」ボタンのほうが軽い
  • ページの位置が重要でない一覧。無限スクロールか「もっと見る」を検討する
  • 手順の進行。Stepper を使う
  • タブのように中身を切り替える操作。Tabs を使う

使い方

<Pagination
  page={3}
  totalPages={10}
  onPageChange={(page) => setCurrentPage(page)}
/>

プロパティ

名前型デフォルト説明
pagenumberなし現在のページ番号（制御。旧 currentPage）
defaultPagenumber1初期ページ（非制御）
totalPages必須numberなし総ページ数
onPageChange(page: number) => voidなしページ変更時のコールバック
siblingCountnumber1現在のページの前後に表示するページ数
labelstringなしAccessible label for the nav element (default: "ページネーション")
prevLabelstringなしAccessible label for the previous button (default: "前のページ")
nextLabelstringなしAccessible label for the next button (default: "次のページ")
pageLabel(page: number) => stringなしAccessible label for each page button (default: ${page}ページ目)

型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。

キーボード操作

キー動作
Tab / Shift + Tab前へ、ページ番号、次へのボタンに順番にフォーカスを移す
Enter / Spaceフォーカス中のボタンを押してページを移動する

アクセシビリティ

  • <nav aria-label="ページネーション"> になる。現在のページには aria-current="page" が付く
  • 各ボタンの名前は「3ページ目」のように読み上げられる。文言は pageLabel、prevLabel、nextLabel で変えられる
  • 先頭では「前のページ」、末尾では「次のページ」が disabled になる。省略記号は読み上げられない
  • ページを移動したら、表の先頭など内容の位置に合わせて、必要なら見出しにフォーカスを移す

関連するコンポーネント