Pagination 分页
Pagination 用来翻阅长列表：前后箭头、页码，以及跳过隐藏页码的省略号；还可以加上每页条数选择器和输入页码的跳转框。它是一个 <nav> 地标；当前页带有 aria-current="page"，每一项都有可读的名字（“第 3 页”“下一页”“向后跳至第 8 页”）。
演示
基础用法
简单模式
simple 用一个显示当前页和总页数的输入框代替页码列表。输入页码后按回车或离开输入框即可跳转。
页码数量
pageSlot 是页码列表占用的格数，省略号也算在内。悬停或聚焦省略号可以看到它跳转的方向。
快速跳转
showQuickJumper 加一个输入页码的框，回车或失焦时跳转，超出范围会被限制在首尾页。
尺寸
small、medium、large 与控件高度一致，每页条数选择器和跳转框与页码对齐。
每页条数
设置 itemCount 时，总页数由它和每页条数算出。showSizePicker 让用户从 pageSizes 中选择每页条数；每页变多导致总页数变少时，当前页会回到范围内。page 和 pageSize 都可以受控。
禁用
前缀与后缀
prefix 和 suffix 接受节点，或接受分页状态并返回节点的函数：page、pageSize、pageCount、itemCount、startIndex 和 endIndex。
自定义箭头和页码
prev、next、goto 替换箭头和跳转框前的文字；label 渲染页码或省略号。可读的名字保持不变。
显示顺序
displayOrder 决定页码列表、每页条数选择器和快速跳转的顺序。
链接
getHref(page) 把每个页码、箭头和省略号都变成 <a href>，搜索引擎可以顺着页码抓取，中键点击会在新标签页打开。普通点击依然会调用 onUpdatePage；带修饰键的点击只跟随链接。箭头带有 rel="prev" / rel="next"，禁用的箭头没有 href。
路由链接
renderItem(props, info) 让你自己渲染每一项，比如使用路由的 Link：把 props（类名、可读名字、aria-current、href 和点击处理）展开到它上面。点击处理先执行，路由仍然可以无刷新跳转。
Pagination Props
| 名称 | 类型 | 默认值 | 说明 | 版本 |
|---|---|---|---|---|
page | number | undefined | 受控时的当前页，从 1 开始。 | 未发布 |
defaultPage | number | 1 | 非受控时的初始页。 | 未发布 |
onUpdatePage | (page: number) => void | undefined | 页码变化时调用。 | 未发布 |
pageCount | number | 1 | 总页数。设置了 itemCount 时忽略。 | 未发布 |
itemCount | number | undefined | 总条数；总页数由它和每页条数算出。 | 未发布 |
pageSize | number | undefined | 受控时的每页条数。 | 未发布 |
defaultPageSize | number | pageSizes 的第一项，否则 10 | 非受控时的初始每页条数。 | 未发布 |
onUpdatePageSize | (pageSize: number) => void | undefined | 每页条数变化时调用。 | 未发布 |
pageSizes | Array<number | PaginationSizeOption> | [10] | 每页条数的选项。数字显示为“10 条/页”。 | 未发布 |
showSizePicker | boolean | false | 显示每页条数选择器。 | 未发布 |
selectProps | Partial<SelectProps> | undefined | 传给每页条数 Select 的其他属性。 | 未发布 |
showQuickJumper | boolean | false | 显示快速跳转输入框。 | 未发布 |
pageSlot | number | 9 | 页码列表占用的格数，含省略号。 | 未发布 |
simple | boolean | false | 用显示当前页和总页数的输入框代替页码列表。 | 未发布 |
disabled | boolean | false | 禁用所有控件。 | 未发布 |
size | small | medium | large | medium | 页码、选择器和输入框的尺寸。 | 未发布 |
displayOrder | Array<'pages' | 'size-picker' | 'quick-jumper'> | ['pages', 'size-picker', 'quick-jumper'] | 各部分的顺序。 | 未发布 |
prefix | ReactNode | (info: PaginationInfo) => ReactNode | undefined | 最前面的内容。 | 未发布 |
suffix | ReactNode | (info: PaginationInfo) => ReactNode | undefined | 最后面的内容。 | 未发布 |
prev | ReactNode | (info: PaginationInfo) => ReactNode | undefined | 替换上一页箭头。 | 未发布 |
next | ReactNode | (info: PaginationInfo) => ReactNode | undefined | 替换下一页箭头。 | 未发布 |
goto | ReactNode | () => ReactNode | 语言包中的“跳至” | 快速跳转前的文字。 | 未发布 |
label | (info: PaginationLabelInfo) => ReactNode | undefined | 页码或省略号的内容。 | 未发布 |
getHref | (page: number) => string | undefined | 链接模式：每一项渲染为 <a href>。 | 未发布 |
renderItem | (props: PaginationItemProps, info: PaginationItemInfo) => ReactNode | undefined | 自己渲染每一项的元素。 | 未发布 |
其他属性（如 aria-label）会传给根元素 <nav>。
类型
type PaginationInfo = {
page: number;
pageSize: number;
pageCount: number;
itemCount: number; // `itemCount`，或 pageCount × pageSize
startIndex: number; // 本页第一条的下标，从 0 开始
endIndex: number; // 本页最后一条的下标
};
type PaginationLabelInfo =
| { type: "page"; node: number; active: boolean }
| { type: "fast-backward" | "fast-forward"; node: ReactNode; active: false };
type PaginationItemInfo = {
type: "page" | "prev" | "next" | "fast-backward" | "fast-forward";
page: number; // 这一项跳转到的页
active: boolean;
disabled: boolean;
href: string | undefined;
};
type PaginationItemProps = {
"aria-current": "page" | undefined;
"aria-disabled": true | undefined;
"aria-label": string;
children: ReactNode;
className: string;
href: string | undefined;
rel: "prev" | "next" | undefined;
onClick: (event: MouseEvent<HTMLElement>) => void;
};说明
prefix、suffix、prev、next和goto接受节点或渲染函数。- 省略号点击即跳转并说明目标页。
- 尺寸跟随控件高度（28 / 34 / 40px），与每页条数选择器和跳转框一致。