设计
设计指南
设计原则
样式指南
设计资源
Klein - Figma
Klein Font
官方图标库
开发
开发文档
React
Vue Web
敬请期待
开发资源
GitHub 代码仓库
生态产品
生态产品
Orion Fonts
敬请期待
Orio Market
敬请期待
Klein Pro
敬请期待
Klein Editor
敬请期待
分页 Pagination
采用分页的形式分隔长列表，每次只加载一个页面；
当加载/渲染所有数据将花费很多时间时；
可切换页码浏览数据。
基础分页
改变每页展示条目
不展示总页数
跳转
迷你
简约
总数
自定义上一步｜下一步｜前后5页跳转
受控的页码
Pagination Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| footerCount | 分页按钮数量 配置此项会固定显示分页按钮 | number | - |
| size | 大小 | "default" | default |
| current | 当前页 | number | - |
| defaultPageSize | 默认每页条数 | number | 10 |
| pageSize | 每页多少条 | number | - |
| disabled | 是否禁用 | boolean | false |
| showQuickJumper | 是否可以快速跳转至某页 | boolean | false |
| total | 数据总数 | number | 0 |
| simple | 当添加该属性时，显示为简单分页 | boolean | false |
| itemRender | 可用于自定义修改page的前一页，后一页，前5页，后5页的元素内容 | ((page: number, type: "page" | - |
| showTotal | 用于显示数据总量和当前数据顺序 | ((total: number, range: number[]) => ReactNode) | - |
| onChange | 页码改变的回调，参数是改变后的页码及每页条数 | ((page: number, pageSize: number) => void) | - |
| className | 自定义样式类 | string | - |
| showSizeChanger | TODO 依赖Select组件 是否展示 pageSize 切换器，当 total 大于 50 时默认为 true | boolean | - |
| onShowSizeChange | TODO pageSize变化的回调 | ((current?: number, size?: number | - |
| hideOnSinglePage | 只有一页时是否隐藏分页器 | boolean | false |
| pageSizeOptions | 指定每页可以显示多少条 | number[] | - |
| showLessItems | 是否显示较少页面内容 | boolean | - |
| leftRightItemOne | 配合showLessItems使用，只显示选中项间隔为1的左右两项，不包含首页和末尾页 | boolean | - |
贡献者
