Pagination

「よくあるテーブル」などの一覧のページを切り替えるためのコンポーネントです。大量データを分割表示し、ページ単位で前後移動させるときに使います。使用する場所によって機能を落とせます。

モバイル

Paginationの代わりに、データを追加で読み込むボタンの利用を検討する

以下の理由から、モバイルでのPaginationの表示には注意が必要です。Paginationの代わりに、データを追加で読み込んで表示するボタン（例：よくあるリストの「さらに表示」ボタン）を使うことを検討してください。

• 水平方向に複数の操作が並ぶPaginationは誤操作を招きやすい
• ユーザーはモバイル環境では垂直方向のスクロールで情報を閲覧する操作に慣れている

ただし、次のような場合にはモバイルでもPaginationが適していることがあります。

• 表示されるデータの件数が多いと想定される場合
• 一覧上から特定のデータを探して操作することが主要な使われ方として想定される場合

モバイルでPaginationを表示する場合は、画面の幅が狭いため、withoutNumberpropsを有効にするか、paddingpropsに0~1の値を設定してください。

使い方チェックリスト

Pagination

参照元：モバイル > Paginationの代わりに、データを追加で読み込むボタンの利用を検討する 「モバイル > Paginationの代わりに、データを追加で読み込むボタンの利用を検討する」の本文へ移動

• Must

  モバイルで Pagination を表示する場合は、`withoutNumber` props を有効にするか、`padding` props に 0〜1 の値を設定する
• Should

  モバイルでは Pagination の代わりに、データを追加で読み込んで表示するボタン（例: よくあるリストの「さらに表示」ボタン）の利用を検討する

  • ただし、表示されるデータの件数が多いと想定される場合や、一覧上から特定のデータを探して操作することが主要な使われ方として想定される場合は、モバイルでも Pagination が適していることがある

Props