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 |
|---|---|---|---|
| active-page-color | Specifies color of the currently active page button. |
|
|
| aria-go-to-last-page-label | The aria-label of the "go to last page" button |
|
|
| aria-go-to-next-page-label | The aria-label of the "go to next page" button |
|
|
| aria-go-to-previous-page-label | The aria-label of the "go to previous page" button |
|
|
| aria-go-to-specific-page-input-label | The aria-label of the "go to specific page" input |
|
|
| aria-go-to-specific-page-label | The aria-label of the "go to specific page" button |
|
|
| aria-go-to-the-first-page-label | The aria-label of the "go to the first page" button |
|
|
| aria-label | The aria-label of the component |
|
|
| border-color | Color CSS style |
|
|
| boundary-icon-left | Set the icon name for left boundary icon. |
|
|
| boundary-icon-right | Set the icon name for right boundary icon. |
|
|
| boundary-links | Show controls to move to first and last page. |
|
|
| boundary-numbers | Always show first and last page (will replace |
|
|
| buttons-preset | Value of the |
|
|
| color | Color of the component (theme string or |
|
|
| direction-icon-left | Set the icon name for left direction icon. |
|
|
| direction-icon-right | Set the icon name for right direction icon. |
|
|
| direction-links | Show buttons to move forward and backward. |
|
|
| disabled | Applies |
|
|
| gapped | Enables gaps between page buttons. |
|
|
| hide-on-single-page | Component won't be displayed if only 1 page is available. |
|
|
| input | Use HTML Input instead of buttons to control |
|
|
| model-value | The value of the |
|
|
| page-size | Set the amount of data to be displayed at 1 page. Used to calculate the length of pagination. This prop should not be used with |
|
|
| pages | The amount of pages. |
|
|
| preset | Named preset combination of component props. |
| - |
| rounded | Adds rounded corners. |
|
|
| size | Specify size for component. |
|
|
| stateful | Add possibility to work with component without setting |
|
|
| total | Set the amount of data pagination should iterate through. This prop should not be used with |
|
|
| visible-pages | The amount of displayed pages (when set to 0 all pages are displayed). |
|
|
Events #
| Name | Description |
|---|---|
update-model-value | 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.