ナビゲーション / 次の移動先
Pagination
クリックする前に、次の移動先がわかるようにします。
基本的な使い方
HTML
<nav class="pager" aria-label="関連するコンポーネント">
<a class="pager-prev" href="../tree/"><span class="pager-dir">前へ</span><span class="pager-name">Tree — 階層をたどる</span></a>
<a class="pager-next" href="../tabs/"><span class="pager-dir">次へ</span><span class="pager-name">Tabs — 表示を切り替える</span></a>
</nav>クラスと属性
| クラス / 属性 | 用途 |
|---|---|
.pager / .pager-prev / .pager-next | 前と次の移動先。 |
.pager-dir / .pager-name | 方向と移動先の名前。 |
.pages / .is-current / .pages-gap | 番号付きページ送り、現在のページ、省略した範囲。 |
使い方の注意
「次へ」だけでなく、移動先を記します。現在のページにはaria-current="page"を付けます。
作例はシステムの配色設定に従います。ヘッダーの◐で自動・ライト・ダークを試せます。