Preview
Variants #
With Active Page #
<dt-pagination
:total-pages="25"
:active-page="5"
/>With Max-Visible #
<dt-pagination
:total-pages="25"
:max-visible="7"
/>Vue API #
import { DtPagination } from '@dialpad/dialtone-vue';Props
Name
|
Default
|
Type
|
|---|---|---|
ariaLabel
required
| string Descriptive label for the pagination content. | |
totalPages
required
| number The total number of the pages | |
activePage | 1 | number The active current page in the list of pages, defaults to the first page |
maxVisible | 5 | number Determines the max pages to be shown in the list. Using an odd number is recommended.
If an even number is given, then it will be rounded down to the nearest odd number to always
keep current page in the middle when current page is in the mid-range. |
showEdges | true | boolean Shows the first and last page buttons when not near the edges.
Set to false when your backend does not support offset and you can only use cursor based pagination. |
Events
Name
|
Type
|
|---|---|
change | Number Page change event |