注目
ページネーションNumbered Pagination
A numbered page strip that collapses long runs to an ellipsis.
#pagination#links#ellipsis
6 個のフレームワーク中級
Loading…
Fully-rounded pill page links that collapse long runs to an ellipsis.
<nav aria-label="Pagination">
<ul class="flex list-none flex-wrap items-center justify-center gap-1.5 p-0">
<li><a href="?page=1" aria-current="page" class="inline-flex h-10 min-w-10 items-center justify-center rounded-full bg-blue-600 px-3 text-sm font-semibold tabular-nums text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">1</a></li>
<li><a href="?page=2" class="inline-flex h-10 min-w-10 items-center justify-center rounded-full px-3 text-sm font-medium tabular-nums text-gray-700 transition-colors hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white motion-reduce:transition-none dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-100 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">2</a></li>
<li><a href="?page=3" class="inline-flex h-10 min-w-10 items-center justify-center rounded-full px-3 text-sm font-medium tabular-nums text-gray-700 transition-colors hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white motion-reduce:transition-none dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-100 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">3</a></li>
<li><span class="inline-flex h-10 min-w-10 items-center justify-center text-sm text-gray-500 dark:text-gray-400" aria-hidden="true">…</span></li>
<li><a href="?page=10" class="inline-flex h-10 min-w-10 items-center justify-center rounded-full px-3 text-sm font-medium tabular-nums text-gray-700 transition-colors hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white motion-reduce:transition-none dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-100 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">10</a></li>
</ul>
</nav>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
currentPage必須 | number | - | 現在のページ番号（1 から開始）。 |
totalPages必須 | number | - | 全ページ数。 |
buildHref必須 | (page: number) => string | - | ページ番号から URL を生成します。ページを実際のリンクとして保つためのものです。 |
siblingCount | number | 1 | 現在のページの両側に表示するページ番号の数。 |
ariaLabel | string | 'Pagination' | ボタンのアクセシブルな名前。アイコンのみのボタンでは必須です。 |
className | string | - | ルート要素にマージされる追加クラス。 |
A softer take on the numbered strip: every page is a rounded pill, the current one filled solid rather than tinted so it reads in forced-colours mode too. `pageRange` returns a union of numbers and gap markers rather than sentinel values, which is what stops a gap ever rendering as a link to page NaN; tune `siblingCount` for how many pages flank the current one. The strip wraps rather than overflowing on narrow screens.