精选
分页Numbered Pagination
A numbered page strip that collapses long runs to an ellipsis.
#pagination#links#ellipsis
6 个框架中级
Loading…
A number field that jumps straight to a typed page, with prev/next either side.
<nav aria-label="Pagination" class="flex flex-wrap items-center justify-center gap-2">
<a href="?page=2" rel="prev" class="inline-flex h-10 items-center rounded-lg border border-gray-300 px-3 text-sm font-medium 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:border-gray-700 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">Previous</a>
<form class="flex items-center gap-2" action="" method="get">
<label for="jump-page" class="text-sm text-gray-600 dark:text-gray-400">Page</label>
<input id="jump-page" name="page" type="number" inputmode="numeric" min="1" max="24" value="3" class="h-10 w-16 rounded-lg border border-gray-300 bg-transparent px-2 text-center text-sm tabular-nums 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 dark:border-gray-700 dark:text-gray-100 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900" />
<span class="text-sm tabular-nums text-gray-600 dark:text-gray-400">of 24</span>
<button type="submit" class="inline-flex h-10 items-center rounded-lg bg-blue-600 px-3 text-sm font-semibold text-white transition-colors hover:bg-blue-700 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:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">Go</button>
</form>
<a href="?page=4" rel="next" class="inline-flex h-10 items-center rounded-lg border border-gray-300 px-3 text-sm font-medium 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:border-gray-700 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">Next</a>
</nav>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
currentPage必填 | number | - | 当前页码，从 1 开始。 |
totalPages必填 | number | - | 总页数。 |
onPageChange必填 | (page: number) => void | - | On page change |
ariaLabel | string | 'Pagination' | 按钮的无障碍名称。仅有图标的按钮必须设置。 |
className | string | - | 合并到根元素上的额外类名。 |
For long lists where stepping one page at a time is tedious. The field is clamped to `[1, totalPages]` on submit rather than trusting the input, because `min`/`max` on a number input is advisory and a hand-typed 999 must still be caught. It is the one interactive entry in the set - `use client` is required because the typed value lives in React state - so wire `onPageChange` to your router. The row wraps under 320px so the field never pushes the arrows off-screen.