mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-19 03:54:28 +08:00
846dc9b022
Some checks are pending
Publish Any Commit / build (push) Waiting to run
🔀 Sync mirror to Gitee / mirror (push) Waiting to run
✅ test / lint (push) Waiting to run
✅ test / test-react-legacy (16, 1/2) (push) Waiting to run
✅ test / test-react-legacy (16, 2/2) (push) Waiting to run
✅ test / test-react-legacy (17, 1/2) (push) Waiting to run
✅ test / test-react-legacy (17, 2/2) (push) Waiting to run
✅ test / test-node (push) Waiting to run
✅ test / test-react-latest (dom, 1/2) (push) Waiting to run
✅ test / test-react-latest (dom, 2/2) (push) Waiting to run
✅ test / test-react-latest-dist (dist, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist, 2/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 2/2) (push) Blocked by required conditions
✅ test / test-coverage (push) Blocked by required conditions
✅ test / build (push) Waiting to run
✅ test / test lib/es module (es, 1/2) (push) Waiting to run
✅ test / test lib/es module (es, 2/2) (push) Waiting to run
✅ test / test lib/es module (lib, 1/2) (push) Waiting to run
✅ test / test lib/es module (lib, 2/2) (push) Waiting to run
👁️ Visual Regression Persist Start / test image (push) Waiting to run
* fix: Pagination select props order * chore: replace with select * chore: back of support * chore: bump rc-pagination * chore: merge selection * chore: fix lint
3.2 KiB
3.2 KiB
| category | group | title | description | cover | coverDark |
|---|---|---|---|---|---|
| Components | Navigation | Pagination | A long list can be divided into several pages, and only one page will be loaded at a time. | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8y_iTJGY_aUAAAAAAAAAAAAADrJ8AQ/original | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*WM86SrBC8TsAAAAAAAAAAAAADrJ8AQ/original |
When To Use
- When it will take a long time to load/render all items.
- If you want to browse the data by navigating through pages.
Examples
Basic
Align
More
Changer
Jumper
Mini size
Simple mode
Controlled
Total number
Show All
Prev and next
Wireframe
component Token
API
Common props ref：Common props
<Pagination onChange={onChange} total={50} />
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| align | Align | start | center | end | - | 5.19.0 |
| current | Current page number | number | - | |
| defaultCurrent | Default initial page number | number | 1 | |
| defaultPageSize | Default number of data items per page | number | 10 | |
| disabled | Disable pagination | boolean | - | |
| hideOnSinglePage | Whether to hide pager on single page | boolean | false | |
| itemRender | To customize item's innerHTML | (page, type: 'page' | 'prev' | 'next', originalElement) => React.ReactNode | - | |
| pageSize | Number of data items per page | number | - | |
| pageSizeOptions | Specify the sizeChanger options | number[] | [10, 20, 50, 100] |
|
| responsive | If size is not specified, Pagination would resize according to the width of the window |
boolean | - | |
| showLessItems | Show less page items | boolean | false | |
| showQuickJumper | Determine whether you can jump to pages directly | boolean | { goButton: ReactNode } | false | |
| showSizeChanger | Determine whether to show pageSize select, it will be true when total > 50 |
boolean | SelectProps | - | SelectProps: 5.21.0 |
| showTitle | Show page item's title | boolean | true | |
| showTotal | To display the total number and range | function(total, range) | - | |
| simple | Whether to use simple mode | boolean | { readOnly?: boolean } | - | |
| size | Specify the size of Pagination, can be set to small |
default | small |
default |
|
| total | Total number of data items | number | 0 | |
| onChange | Called when the page number or pageSize is changed, and it takes the resulting page number and pageSize as its arguments |
function(page, pageSize) | - | |
| onShowSizeChange | Called when pageSize is changed |
function(current, size) | - |