注目
ページネーションNumbered Pagination
A numbered page strip that collapses long runs to an ellipsis.
#pagination#links#ellipsis
6 個のフレームワーク中級
Loading…
First, previous, next and last icon links with a visually-hidden status.
<!--
Icon-only controls, so each carries a text label the icon replaces visually -
aria-label on the link, and a visually-hidden live status names the position
for anyone who cannot see the four arrows change state.
-->
<nav aria-label="Pagination" class="inline-flex items-center gap-1">
<a href="?page=1" aria-label="First page" class="inline-flex h-10 w-10 items-center justify-center rounded-lg 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">
<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="m11 17-5-5 5-5" /><path d="m18 17-5-5 5-5" /></svg>
</a>
<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-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">
<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="sr-only" role="status" aria-live="polite">Page 3 of 10</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-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">
<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>
<a href="?page=10" aria-label="Last page" class="inline-flex h-10 w-10 items-center justify-center rounded-lg 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">
<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="m13 17 5-5-5-5" /><path d="m6 17 5-5-5-5" /></svg>
</a>
</nav>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
currentPage必須 | number | - | 現在のページ番号（1 から開始）。 |
totalPages必須 | number | - | 全ページ数。 |
buildHref必須 | (page: number) => string | - | ページ番号から URL を生成します。ページを実際のリンクとして保つためのものです。 |
ariaLabel | string | 'Pagination' | ボタンのアクセシブルな名前。アイコンのみのボタンでは必須です。 |
className | string | - | ルート要素にマージされる追加クラス。 |
Four icon-only controls, so each carries an `aria-label` the glyph replaces visually, and a `sr-only` live region names "Page 3 of 10" for anyone who cannot watch the arrows change. Bounds are disabled by dropping the href rather than styling alone, which is what actually makes them unfocusable and inert. Prefer this where horizontal space is scarce and the exact page number matters less than stepping through.