Pagination
Pagination
Component demo
Interactive example
<ic-paginationpages="15"></ic-pagination><ic-paginationpages="15"type="complex"></ic-pagination><IcPaginationpages={15}/><IcPaginationpages={15}type="complex"/>Pagination details
Props
All components also accept native properties supported by the DOM, such asclassName
and
style
.
|
|
|
|
|---|---|---|
|
|
The total number of pages. |
|
|
|
The number of pages displayed adjacent to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2. |
|
|
|
The appearance of the pagination, e.g. dark, light or the default. |
|
|
|
The number of pages displayed as boundary items to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2. |
|
|
|
The current page displayed by the pagination. |
|
|
|
The default page to display. |
|
|
|
If |
|
|
|
If |
|
|
|
If |
|
|
|
The label for the pagination item (applicable when simple pagination is being used). |
|
|
|
The type of pagination to be used. |
|
|
The total number of pages. |
|
The number of pages displayed adjacent to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2. |
|
The appearance of the pagination, e.g. dark, light or the default. |
|
The number of pages displayed as boundary items to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2. |
|
The current page displayed by the pagination. |
|
The default page to display. |
|
If |
|
If |
|
If |
|
The label for the pagination item (applicable when simple pagination is being used). |
|
The type of pagination to be used. |
Events
All components also accept native events supported by the DOM, such as
onClick
and
onKeyDown
.
|
|
|
|
|---|---|---|
|
|
|
|
|
|
Methods
|
|
|
|
|---|---|---|
|
|
|
|
|
|
Variants
Hide first and last page buttons
Interactive example
<ic-paginationhide-first-and-last-page-button="true"pages="15"></ic-pagination><IcPaginationhideFirstAndLastPageButtonpages={15}/>Hide current page (only in 'simple' type)
Interactive example
<ic-paginationhide-current-page="true"pages="15"></ic-pagination><IcPaginationhideCurrentPagepages={15}/>Appearance
Interactive example
<ic-paginationappearance="dark"pages="15"></ic-pagination><ic-paginationappearance="light"pages="15"class="dark-background"></ic-pagination><IcPaginationappearance="dark"pages={15}/><IcPaginationappearance="light"pages={15}class={classes.darkBackground}/>Boundary and Adjacent items set
Interactive example
<ic-paginationtype="complex"adjacent-count="2"boundary-count="2"pages="15"></ic-pagination><IcPaginationtype="complex"adjacentCount={2}boundaryCount={2}pages={15}/>Disabled
Interactive example
<ic-paginationtype="complex"disabled="true"pages="12"></ic-pagination><IcPaginationtype="complex"disabledpages={12}/>Label
Interactive example
<ic-paginationlabel="Slide"pages="12"></ic-pagination><IcPaginationlabel="Slide"pages={12}/>Default page
Interactive example
<ic-paginationpages="12"default-page="4"></ic-pagination><IcPaginationpages={12}defaultPage={4}/>