Pagination 分页
在分段结果集之间导航，并清楚标记当前页及前后页入口。
使用概览
适合使用
- 数据量较大，需要稳定网址或服务端分页来控制加载量时。
不建议使用
- 内容适合连续滚动，或结果很少无需拆分页面时。
真实示例
搜索结果分页
标记第二页并提供相邻页面链接。
正在加载示例…
安装
本地候选警告Registry 地址仅指向当前本地文档站；npm 包也只用于本地候选验证，尚未公开发布。
pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/pagination.json基础用法
导入
import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext } from "@richardqiu/quartz/pagination";JSX
<Pagination aria-label="搜索结果分页"><PaginationContent><PaginationItem><PaginationPrevious href="?page=1" label="上一页" /></PaginationItem><PaginationItem><PaginationLink href="?page=2" isActive>2</PaginationLink></PaginationItem><PaginationItem><PaginationNext href="?page=3" label="下一页" /></PaginationItem></PaginationContent></Pagination>状态与控制摘要
默认
悬停
键盘焦点可见
已禁用
已选择
label · textactive · booleanAPI 参考
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
aria-label | string | "Pagination" | 为分页导航区域提供符合页面语境的名称。 |
组合结构
- 01
Pagination - 02
PaginationContent - 03
PaginationItem - 04
PaginationLink - 05
PaginationPrevious - 06
PaginationNext - 07
PaginationEllipsis
键盘约定
- Tab 访问可用链接，Enter 跳转；禁用的上一页或下一页不含 href，并暴露 aria-disabled。
可访问性契约
- 分页导航、上一页、下一页与省略号都需要本地化标签，当前页使用 aria-current=page。
- 路由链接必须保留原生链接、焦点与 href 语义。