Pagination分页
Pagination
分页
分页器用于分隔长列表，每次只加载一个页面。
使用import{ Pagination }from"antd"; |
文档编辑此页 |
开发
设计
何时使用
- 当加载/渲染所有数据将花费很多时间时；
- 可切换页码浏览数据。
代码演示
基础分页。
更多分页。
改变每页显示条目数。
快速跳转到某一页。
迷你版本。
- /5
- 2/5
- /5
简单的翻页。
受控制的页码。
通过设置 showTotal 展示总共有多少数据。
展示所有配置选项。
修改上一步和下一步为文字链接。
线框化样式。
Component Token Debug.
API
通用属性参考：通用属性
<Pagination onChange={onChange} total={50} />
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| align | 对齐方式 | start | center | end | - | 5.19.0 |
| current | 当前页数 | number | - | |
| defaultCurrent | 默认的当前页数 | number | 1 | |
| defaultPageSize | 默认的每页条数 | number | 10 | |
| disabled | 禁用分页 | boolean | - | |
| hideOnSinglePage | 只有一页时是否隐藏分页器 | boolean | false | |
| itemRender | 用于自定义页码的结构，可用于优化 SEO | (page, type: 'page' | 'prev' | 'next', originalElement) => React.ReactNode | - | |
| pageSize | 每页条数 | number | - | |
| pageSizeOptions | 指定每页可以显示多少条 | string[] | number[] | [10, 20, 50, 100] | |
| responsive | 当 size 未指定时，根据屏幕宽度自动调整尺寸 | boolean | - | |
| showLessItems | 是否显示较少页面内容 | boolean | false | |
| showQuickJumper | 是否可以快速跳转至某页 | boolean | { goButton: ReactNode } | false | |
| showSizeChanger | 是否展示 pageSize 切换器，当 total 大于 50 时默认为 true | boolean | SelectProps | - | SelectProps: 5.21.0 |
| showTitle | 是否显示原生 tooltip 页码提示 | boolean | true | |
| showTotal | 用于显示数据总量和当前数据顺序 | function(total, range) | - | |
| simple | 当添加该属性时，显示为简单分页 | boolean | { readOnly?: boolean } | - | |
| size | 当为 small 时，是小尺寸分页 | default | small | default | |
| total | 数据总数 | number | 0 | |
| onChange | 页码或 pageSize 改变的回调，参数是改变后的页码及每页条数 | function(page, pageSize) | - | |
| onShowSizeChange | pageSize 变化的回调 | function(current, size) | - |
主题变量（Design Token）
组件 Token如何定制？
| Token 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| itemActiveBg | 页码激活态背景色 | string | #ffffff |
| itemActiveBgDisabled | 页码激活态禁用状态背景色 | string | rgba(0, 0, 0, 0.15) |
| itemActiveColorDisabled | 页码激活态禁用状态文字颜色 | string | rgba(0, 0, 0, 0.25) |
| itemBg | 页码选项背景色 | string | #ffffff |
| itemInputBg | 输入框背景色 | string | #ffffff |
| itemLinkBg | 页码链接背景色 | string | #ffffff |
| itemSize | 页码尺寸 | number | 32 |
| itemSizeSM | 小号页码尺寸 | number | 24 |
| miniOptionsSizeChangerTop | 每页展示数量选择器 top | number | 0 |