Pagenationは、大量のコンテンツやデータを複数のページに分割し、次のページや前のページに移動するためのコントロールとして使用します。
種類
Paginationの基本機能のみの「Pagination Basic」、表示件数の指定、表示ページの入力機能を備えた「Pagination Component」、ページ数を簡易的にドットで表す「Pagination Indicator」の3種類を用意しています。
![](https://manual.uxhub.tokyo/wp-content/uploads/2024/05/image-2.png)
Properties(振る舞いの設定)
Component Propertiesで設定されている内容。
![](https://manual.uxhub.tokyo/wp-content/uploads/2024/05/Pagination_0-1-456x1024.png)
カラートークン
State | Element | Token |
Default | Label(Number) | General/Neutral/main |
Container | General/Neutral/contrast | |
Icon(Allow) | General/Neutral/light | |
Hovered | Label(Number) | General/Neutral/main |
Container | General/Primary/hovered fade | |
Icon(Allow) | General/Neutral/hovered | |
Selected | Label(Number) | General/Neutral/static white |
Container | General/Primary/light | |
Disabled | Icon(Allow) | General/Neutral/disabled |
Usage
Page Control Inputは、ユーザーが直接値を入力する事ができます。
![](https://manual.uxhub.tokyo/wp-content/uploads/2024/05/image-3.png)
Page Control Dropdownでは、ユーザーが表示件数を選ぶ事ができます。Popup Menuと併せて使用します。
![](https://manual.uxhub.tokyo/wp-content/uploads/2024/05/image-4.png)