精选
分页Numbered Pagination
A numbered page strip that collapses long runs to an ellipsis.
#pagination#links#ellipsis
6 个框架中级
Loading…
A pill-shaped inline pager with a tiny count and full-size arrow tap targets.
<!--
A pill-shaped inline control for tight spots like a card header. The label is
small, but the two arrow links keep a full 40px-square hit area - visual
density never shrinks the tap target below the accessible minimum.
-->
<nav aria-label="Pagination" class="inline-flex items-center rounded-full border border-gray-300 dark:border-gray-700">
<a href="?page=2" rel="prev" aria-label="Previous page" class="inline-flex h-10 w-10 items-center justify-center rounded-l-full text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-600 motion-reduce:transition-none dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100">
<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="min-w-14 px-1 text-center text-xs font-medium tabular-nums text-gray-700 dark:text-gray-300" role="status" aria-live="polite">3 / 12</span>
<a href="?page=4" rel="next" aria-label="Next page" class="inline-flex h-10 w-10 items-center justify-center rounded-r-full text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-600 motion-reduce:transition-none dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100">
<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 | - | 合并到根元素上的额外类名。 |
A dense control for a card header or toolbar. The label shrinks to `text-xs`, but the two arrow links keep a full 40px-square hit area - visual density never drops the tap target below the accessible minimum. The count is a live region, the arrows carry `aria-label`s, and bounds disable by dropping the href. Inline `border` and rounded ends make it read as one compact object.