精选
分页Numbered Pagination
A numbered page strip that collapses long runs to an ellipsis.
#pagination#links#ellipsis
6 个框架中级
Loading…
Two links driven by opaque next/previous cursors, hidden when an end is reached.
<!--
Cursor pagination has no page numbers to render - the server hands back an
opaque token for the next and previous slice, and a null token is the only
signal that an end has been reached. So the control is exactly two links, each
present only when its cursor exists.
-->
<nav aria-label="Pagination" class="flex items-center justify-between gap-3">
<a href="?before=eyJpZCI6MTB9" rel="prev" class="inline-flex h-10 items-center gap-1.5 rounded-lg border border-gray-300 px-3.5 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">
<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>
Newer
</a>
<a href="?after=eyJpZCI6MjB9" rel="next" class="inline-flex h-10 items-center gap-1.5 rounded-lg border border-gray-300 px-3.5 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">
Older
<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 | 类型 | 默认值 | 说明 |
|---|---|---|---|
prevCursor必填 | string | null | - | Prev cursor |
nextCursor必填 | string | null | - | Next cursor |
buildHref必填 | (cursor: string) => string | - | 根据页码生成 URL，使分页保持为真实链接。 |
ariaLabel | string | 'Pagination' | 按钮的无障碍名称。仅有图标的按钮必须设置。 |
className | string | - | 合并到根元素上的额外类名。 |
The right control for keyset or cursor APIs, where there are no page numbers to render - the server returns an opaque token for each direction and a null token is the only signal an end was reached. Each link is present only when its cursor exists, so the disabled state is a genuine absence of a destination rather than a styled dead link. Prefer this over numbered pages for feeds that grow while they are read, where a fixed page 7 would drift underneath the reader.