Pagination
yarn add @clayui/pagination
Pagination provides horizontal navigation between chunks(pages) of a dataset.
Stable3.3.4View in LexiconCHANGELOG
Pagination
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
size | 'lg' | 'sm' | false | The size of pagination element. |
Pagination.Ellipsis
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
items | Array<number> | false | [] | |
disabledPages | Array<number> | false | [] | |
hrefConstructor | (page?: number) => string | false | ||
onPageChange | (page?: number) => void | false |
Pagination.Item
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
active | boolean | false | false | |
disabled | boolean | false | false | |
href | string | false |
PaginationWithBasicItems
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
activePage | number | true | The page that is currently active. The first page is `1`. | |
ariaLabels | { previous: string; next: string; } | false | { next: 'Next', previous: 'Previous', } | Labels for the aria attributes |
ellipsisBuffer | number | false | 2 | The number of pages to show on each side of the active page before using an ellipsis dropdown. |
disabledPages | Array<number> | false | [] | The page numbers that should be disabled. For example, `[2,5,6]`. |
hrefConstructor | (page?: number) => string | false | Function used to create the href provided for each page link. | |
onPageChange | (page?: number) => void | false | Callback for when the active page changes. This is only used if an href is not provided. | |
totalPages | number | true | The total number of pages in the pagination list. | |
spritemap | string | false | Path to spritemap from clay-css. |