Pagination

Paginationは、コンテンツを複数のページに分割し、ユーザーが異なるページへ移動できるようにするコンポーネントです。

プロパティ

Paginationは、以下のプロパティをサポートしています。

名前	型	デフォルト値	説明
`maxPage`	`number`	`0`	最大ページ数を指定します。
`maxVisible`	`number`	`7`	表示する最大ページ項目数（省略記号含む）。3以下のときは省略記号なしで表示されます。
`currentPage`	`number`	なし	現在のページ番号です。
`prevLabel`	`string`	`前へ`	「前へ」ボタンの表示ラベルです。
`nextLabel`	`string`	`次へ`	「次へ」ボタンの表示ラベルです。
`showEllipsis`	`boolean`	`true`	省略記号を表示するかどうかを制御します。
`disabled`	`boolean`	`false`	指定された場合は選択不可になります。
`onPageChange`	`(page: number) => void`	なし	ページ番号がクリックされた際に呼び出される関数です。

以下のコンポーネントのコードを、使いたいプロジェクトにコピー＆ペーストします。
パスは実際のプロジェクトの構成にあわせて更新します。

基本的なページネーションのスタイルです。前後ボタンとページ番号を表示します。

選択不可の状態です。

ページ番号をクリックすると onPageChange が発火し、選択されたページ番号を親コンポーネントに通知します。
これにより、外部でページ状態を管理できます。