Pagination ページ送り · kf-pages
長い一覧を分けて見せる。現在地と全体の件数を示す。
HTML
<nav class="kf-pages" aria-label="ページ">
<button disabled aria-label="前へ">‹</button>
<a href="#" class="is-current" aria-current="page">1</a><a href="#">2</a><a href="#">3</a><span class="gap">…</span><a href="#">12</a>
<button aria-label="次へ">›</button>
<span class="sum">1–50 / 584 件</span>
</nav>nav.kf-pagesの中に前へ・ページ番号・次へ。現在地はis-currentとaria-current="page"。省略はspan.gap。- 右端に
span.sumで「1–50 / 584 件」の形。件数は等幅数字。 - 1 ページは 50 行まで。50 行を超える一覧は、ページ送りより先に絞り込みを置く(Table の決まりと同じ)。
- 端のボタンは押せないとき
disabled。隠さない。 - 「もっと見る」で継ぎ足す形は、並び順が意味を持つ一覧にだけ。表にはページ送りを使う。