精选
分页Numbered Pagination
A numbered page strip that collapses long runs to an ellipsis.
#pagination#links#ellipsis
6 个框架中级
Loading…
A dot-per-page pager where each 10px mark sits inside a 40px tap target.
<!--
The visible dot is 10px, but each dot is wrapped in a 40px-square link so the
tap target clears the minimum - the small mark is decoration, the hit area is
the control. aria-current + a wider filled dot carry "you are here" to both a
screen reader and a colour-blind user.
-->
<nav aria-label="Pagination" class="flex items-center justify-center gap-1">
<a href="?page=1" rel="prev" aria-label="Previous page" class="inline-flex h-10 w-10 items-center justify-center rounded-full text-gray-500 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="flex flex-wrap items-center justify-center">
<a href="?page=1" aria-label="Go to page 1" class="group inline-flex h-10 w-10 items-center justify-center focus-visible:outline-none">
<span class="h-2.5 w-2.5 rounded-full bg-gray-300 transition-all group-hover:bg-gray-400 group-focus-visible:ring-2 group-focus-visible:ring-blue-600 group-focus-visible:ring-offset-2 group-focus-visible:ring-offset-white motion-reduce:transition-none dark:bg-gray-600 dark:group-hover:bg-gray-500 dark:group-focus-visible:ring-blue-400 dark:group-focus-visible:ring-offset-gray-900"></span>
</a>
<a href="?page=2" aria-current="page" aria-label="Go to page 2, current page" class="group inline-flex h-10 w-10 items-center justify-center focus-visible:outline-none">
<span class="h-2.5 w-5 rounded-full bg-blue-600 transition-all group-focus-visible:ring-2 group-focus-visible:ring-blue-600 group-focus-visible:ring-offset-2 group-focus-visible:ring-offset-white motion-reduce:transition-none dark:bg-blue-500 dark:group-focus-visible:ring-blue-400 dark:group-focus-visible:ring-offset-gray-900"></span>
</a>
<a href="?page=3" aria-label="Go to page 3" class="group inline-flex h-10 w-10 items-center justify-center focus-visible:outline-none">
<span class="h-2.5 w-2.5 rounded-full bg-gray-300 transition-all group-hover:bg-gray-400 group-focus-visible:ring-2 group-focus-visible:ring-blue-600 group-focus-visible:ring-offset-2 group-focus-visible:ring-offset-white motion-reduce:transition-none dark:bg-gray-600 dark:group-hover:bg-gray-500 dark:group-focus-visible:ring-blue-400 dark:group-focus-visible:ring-offset-gray-900"></span>
</a>
</span>
<a href="?page=3" rel="next" aria-label="Next page" class="inline-flex h-10 w-10 items-center justify-center rounded-full text-gray-500 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 | - | 合并到根元素上的额外类名。 |
Best for small, known page counts - an onboarding flow, a gallery, a card carousel - where numbers would be more than the reader needs. Each dot stays a real `<a href>` so the page remains bookmarkable, and the visible 10px mark is wrapped in a 40px-square link so the hit area clears the touch minimum the mark itself does not. The current page is both wider and filled, and carries `aria-current`, so "you are here" survives colour blindness and screen readers alike.