ページネーションPagination
Experimental

複数ページに分かれた一覧や検索結果を移動するためのナビゲーションです。ページ番号、省略記号、前後移動に加えて、件数サマリーや表示件数の選択と組み合わせて使います。

状態とバリエーション

現在ページをアプリ側の state で管理し、必要なページ番号だけを表示します。

現在のページ 7 / 50

ページ数が多い一覧では、前後移動に加えて先頭と末尾へ直接移動する操作を追加できます。

現在のページ 6 / 24

スペースが限られる場所では、最初・前へ・次へ・最後のラベルを視覚的に隠し、ツールチップと aria-label で意味を補います。

現在のページ 3 / 12

DataTable と同じ考え方で、件数サマリー、表示件数、先頭/末尾、スマホ用ページ選択を組み合わせます。

51 - 75 / 全238件

表示件数

表は横にスクロールできます

プロパティ	型	初期値	説明
Pagination	nav	-	ページ送り全体のランドマーク。
PaginationLink.isActive	boolean	-	現在ページを示します。
PaginationFirst / PaginationLast	a	-	必要な場合に先頭ページ、末尾ページへ移動するリンク。長い一覧やテーブルではオプションとして組み合わせます。
PaginationPrevious / PaginationNext	a	-	前後ページへ移動するリンク。label で表示文言を差し替えられます。
PaginationEllipsis	span	-	省略されたページ範囲を示します。