Pagination #
The pagination component is used to split big data sets into chunks so that it's simpler for users to use provided information.
Examples #
Default #
By default the component is displayed as a list of pages with length equal to pages prop value.
Limiting the length #
By using visible-pages prop you can set the amount of pages visible on screen.
Presets #
We provide several built-in style presets: default, primary, secondary (inherited from VaButton). You can switch between them via buttons-preset prop.
Color #
Set different colors using color prop. You can either user theme string HEX color value.
Gaps #
gapped prop allows you to add distance between pagination items.
Size #
Utilize size prop in order to make component fit your needs. Refer to API section for more in-depth explanation of how to use size prop.
Borders #
Specifying border-color prop will add borders to the pagination items.
Rounded #
rounded prop makes your pagination items rounded.
Active pagination button color #
You can specify color of the current pagination item via active-page-color prop.
Custom icons #
Feeling the need to change icons for arrows? We have 4 props to enable full customization of va-pagination component.
Using HTML input instead of pages #
With input prop you can have input with arrow buttons instead of default pagination.
Using total and page-size #
total and page-sizeYou can provide total and page-size props to va-pagination component and let it calculate the length of pagination itself. The value of the component in this case would be equal to the number of the first item at the selected page.
Custom links instead of icons #
The prevPageLink and nextPageLink slots allow you to set a different look to the buttons to go to the previous/next page.
API #
Props #
| Name | Description | Types | Default |
|---|---|---|---|
| activePageColor |
|
| |
| ariaGoToLastPageLabel |
|
| |
| ariaGoToNextPageLabel |
|
| |
| ariaGoToPreviousPageLabel |
|
| |
| ariaGoToSpecificPageInputLabel |
|
| |
| ariaGoToSpecificPageLabel |
|
| |
| ariaGoToTheFirstPageLabel |
|
| |
| ariaLabel |
|
| |
| borderColor |
|
| |
| boundaryIconLeft |
|
| |
| boundaryIconRight |
|
| |
| boundaryLinks |
|
| |
| boundaryNumbers |
|
| |
| buttonsPreset |
|
| |
| color |
|
| |
| directionIconLeft |
|
| |
| directionIconRight |
|
| |
| directionLinks |
|
| |
| disabled |
|
| |
| gapped |
|
| |
| hideOnSinglePage |
|
| |
| input |
|
| |
| modelValue |
|
| |
| pages |
|
| |
| pageSize |
|
| |
| preset |
| - | |
| rounded |
|
| |
| size |
|
| |
| stateful |
|
| |
| total |
|
| |
| visiblePages |
|
|
Events #
| Name | Description |
|---|---|
update:modelValue | The event is triggered when the component needs to change the model. Is also used by |
Slots #
| Name | Description |
|---|---|
firstPageLink | For the first page link content |
lastPageLink | For the last page link content |
nextPageLink | For the next page link content |
prevPageLink | For the prev page link content |
Css Variables #
| Name | Default Value |
|---|---|
| --va-pagination-gap | 0.5rem |
| --va-pagination-input-background | var(--va-background-primary) |
| --va-pagination-input-border-style | solid |
| --va-pagination-input-border-width | 1px 0 |
| --va-pagination-input-text-align | center |
| --va-pagination-input-font-size | 1rem |
| --va-pagination-button-content-width | 0.5rem |
| --va-pagination-button-sm-size | var(--va-button-sm-size) |
| --va-pagination-button-size | var(--va-button-size) |
| --va-pagination-button-lg-size | var(--va-button-lg-ze) |
FAQ #
What will happen if both pages and total props are set? #
pages and total props are set?The error will be thrown into the console. Component is meant to be used only in one of these modes.
Can I use total and input props together? #
total and input props together?Yep. In v-model you'll get item number instead of page number.