注目
ページネーションNumbered Pagination
A numbered page strip that collapses long runs to an ellipsis.
#pagination#links#ellipsis
6 個のフレームワーク中級
Loading…
Two chevron links either side of a compact "Page 3 of 12" readout.
<nav aria-label="Pagination" class="inline-flex items-center gap-3">
<a href="?page=2" rel="prev" aria-label="Previous page" class="inline-flex h-10 w-10 items-center justify-center rounded-lg text-gray-600 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-400 dark:hover:bg-gray-800 dark:hover:text-gray-100 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m15 18-6-6 6-6" /></svg>
</a>
<span class="text-sm tabular-nums text-gray-700 dark:text-gray-300" role="status" aria-live="polite">Page <span class="font-semibold text-gray-900 dark:text-gray-100">3</span> of 12</span>
<a href="?page=4" rel="next" aria-label="Next page" class="inline-flex h-10 w-10 items-center justify-center rounded-lg text-gray-600 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-400 dark:hover:bg-gray-800 dark:hover:text-gray-100 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m9 18 6-6-6-6" /></svg>
</a>
</nav>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
currentPage必須 | number | - | 現在のページ番号（1 から開始）。 |
totalPages必須 | number | - | 全ページ数。 |
buildHref必須 | (page: number) => string | - | ページ番号から URL を生成します。ページを実際のリンクとして保つためのものです。 |
ariaLabel | string | 'Pagination' | ボタンのアクセシブルな名前。アイコンのみのボタンでは必須です。 |
className | string | - | ルート要素にマージされる追加クラス。 |
The smallest complete pager: where can I go, and where am I, in one line. The count is a live region so it is re-announced after a client navigation, and the chevron links carry `aria-label`s because their glyphs have no text. Bounds disable by dropping the href. Reach for this in a card footer or a detail panel where a full numbered strip would be too much furniture.