Basic Usage
<KtPagination :total="50" :pageSize="10" />
Default Page
<KtPagination :total="50" :pageSize="10" :page="3" />
Styles
Expanded
<KtPagination pagingStyle="expand" :total="50" :pageSize="10" />
Fraction
<KtPagination pagingStyle="fraction" :total="50" :pageSize="10" />
Flexible
<KtPagination pagingStyle="flex" :total="500" :pageSize="10" />
Extra Options
<KtPagination
pagingStyle="flex"
:total="500"
:pageSize="10"
:page="25"
:adjacentAmount="1"
/>
<KtPagination
pagingStyle="flex"
:total="500"
:pageSize="10"
:page="25"
:adjacentAmount="2"
/>
<KtPagination
pagingStyle="flex"
:total="500"
:pageSize="10"
:page="25"
:adjacentAmount="3"
/>
<KtPagination pagingStyle="flex" :total="500" :pageSize="10" />
<KtPagination pagingStyle="flex" :total="500" :pageSize="10" fixedWidth />
Usage
Props
| Attribute | Description | Type | Accepted Values | Default |
|---|
adjacentAmount | number of pairs of adjacent pages to display | Number | -- | 1 |
fixedWidth | set width based on max number of elements | Boolean | True, False | False |
page | the default page to show | Number | -- | -- |
pageSize | amount of items each page | Number | -- | 10 |
pagingStyle | style of the pagination | String | expand, flex, fraction | expand |
total | total amount of items | Number | -- | Required |
Events
| Event Name | Description | Parameters |
|---|
currentPageChange | trigger when number clicked | (event: Event, payload: currentPage) |
nextPageClicked | trigger when next page button clicked | (event: Event, payload: currentPage) |
previousPageClicked | trigger when previous page button clicked | (event: Event, payload: currentPage) |