Pagination
Use pagination to separate long sets of data so that it is easier for a user to consume information.
Examples
loading...Web Component
Chi Vue
Props
Property | Description | Type | Default |
|---|---|---|---|
ariaLabel | To define aria label of pagination | string | 'Pagination' |
compact | To define compact style of pagination | boolean | false |
currentPage | To define current page of pagination | number | 1 |
firstLast | To add First page / Last page icon buttons | boolean | false |
inverse | To render inverse styled pagination | boolean | false |
pageJumper | To add jump to page text input | boolean | false |
pageSize | To allow use select number of items to show per page | boolean | false |
pages | To define number of pages to render | number | undefined |
results | To show number of result items | number | 0 |
size | To define size of pagination elements | string | 'md' |
Events
Event | Description | Type |
|---|---|---|
chiPageChange | Triggered when the user navigates to another page by clicking pagination item buttons or changing value of Page Jumper input | CustomEvent<number> |
chiPageSizeChange | Triggered when the user changes items per page value | CustomEvent<number> |
Accessibility
Accessibility guidelines coming soon