ページナビゲーション ( 概要 )
ページナビゲーションは、複数に分割されたページやコンテンツを前後移動で表示できるようにするコンポーネントです。
カルーセルやイメージスライダーのスライド切り替え、または連続するページのナビゲーションに使用します。
ユースケース
- 一覧やテーブルを分割して前後に切り替えるとき
- 同じ種類のコンテンツを表示件数で区切って一覧やテーブルに表示している場合に、前後の表示単位へ切り替えられるようにします。「1/24」「13ページ(全24ページ)」のように、全体に対する現在の位置を示すこともできます。
- 順番に並んだコンテンツを前後に移動するとき
- 連続する記事など、順番に並んだコンテンツを読んでいる際に、順番的に前後になるコンテンツへ移動できるようにします。このとき、コンテンツ名をボタンラベルに含めることもできます。
注意が必要なケース
- 一連の手続きを示す場合はステップナビゲーションを使う
- 複数のステップからなる手続き全体の現在位置と流れを提示する場合は、ページナビゲーションではなくステップナビゲーションを使用してください。
- 前後のページがない場合にボタンを無効化(disabled/非活性化)しない
- 前のページまたは次のページが存在しない場合は、ボタンを無効化(disabled/非活性化)せず、ボタンを非表示にしてください。
関連コンポーネント
各種リソース
| 種別 | リソース | 状態 |
|---|---|---|
| デザイン | Figmaデザインデータ(v2) | 提供中 |
| HTML版実装 | ソースコード(GitHub) | 提供中 |
| サンプル(Storybook) | 提供中 | |
| React版実装 | ソースコード(GitHub) | 提供中 |
| サンプル(Storybook) | 提供中 |