zent
Version:
一套前端设计语言和基于React的实现
57 lines (46 loc) • 5.64 kB
Markdown
---
title: Pagination
path: component/pagination
group: Navigation
---
## Pagination
Split content or data into multiple pages and provide jumping capability.
### API
#### Pagination
⚠️ Warning: API is not compatible with old versions.
| Property | Description | Type | Default | Required |
| --------------- | ---------------------------------------------------- | ------------------------------------------------------- | ------------- | -------- |
| onChange | Callback when pageSize or current changes | `({pageSize: number, current: number}) => any` | | Yes |
| current | Current page number | `number` | `1` | No |
| total | Total number of items | `number` | `0` | No |
| formatTotal | Format total for display | `(total: number) => React.ReactNode` | `identity` | No |
| pageSize | Number of items per page | `number` | `10` | No |
| pageSizeOptions | Page size options | `Array<number>` \| `Array<{text: node, value: number}>` | | No |
| showQuickJumper | Allow quick jump to page | `boolean` | `true` | No |
| showSizeChanger | Allow change page size | `boolean` | `true` | No |
| buttonBordered | Button has border | `boolean` | `true` | No |
| lastPageHelp | Tooltip for next page button when reaching last page | `IPopProps` | Default style | No |
| className | Custom class name | `string` | | No |
#### LitePagination
| Property | Description | Type | Default | Required |
| --------------- | ---------------------------------------------------- | ------------------------------------------------------- | ------------- | -------- |
| onChange | Callback when pageSize or current changes | `({pageSize: number, current: number}) => any` | | Yes |
| current | Current page number | `number` | `1` | No |
| total | Total number of items | `number` | `0` | No |
| pageSize | Number of items per page | `number` | `10` | No |
| pageSizeOptions | Page size options | `Array<number>` \| `Array<{text: node, value: number}>` | | No |
| showQuickJumper | Allow quick jump to page | `boolean` | `false` | No |
| showSizeChanger | Allow change page size | `boolean` | `false` | No |
| buttonBordered | Button has border | `boolean` | `false` | No |
| lastPageHelp | Tooltip for next page button when reaching last page | `IPopProps` | Default style | No |
| className | Custom class name | `string` | | No |
#### MiniPagination
| Property | Description | Type | Default | Required |
| -------------- | ---------------------------------------------------- | ---------------------------------------------- | ------------- | -------- |
| onChange | Callback when pageSize or current changes | `({pageSize: number, current: number}) => any` | | Yes |
| current | Current page number | `number` | `1` | No |
| total | Total number of items | `number` | `0` | No |
| pageSize | Number of items per page | `number` | `10` | No |
| buttonBordered | Button has border | `boolean` | `true` | No |
| lastPageHelp | Tooltip for next page button when reaching last page | `IPopProps` | Default style | No |
| className | Custom class name | `string` | | No |