ページネーション

component

検索結果や一覧が複数ページに分かれるとき、ページを行き来するためのナビゲーションです。いま何ページ目にいるかが色で分かります。

項目の状態

enable / hover / focus / current / disabled。現在のページは aria-current="page"、端で押せない矢印は aria-disabled="true" で指定

enable hover focus current disabled

使用例

ページ数が少なければ全ページを並べ、多いときは .pagination-ellipsis で省略する。1 ページ目では「前へ」を aria-disabled="true" にする

ページ数が少ない場合（省略なし・全 5 ページ）

ページ数が多い場合（省略あり・全 10 ページ）

先頭ページ（「前へ」は無効）

機能

このコンポーネントの用途

一覧が複数ページに分かれるとき、ページを行き来するナビゲーション。
同一ページ内の表示切替は tab、手続きの進捗は stepper。