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.

Open in GitHub

Limiting the length
#

By using visible-pages prop you can set the amount of pages visible on screen.

Open in GitHub

Presets
#

We provide several built-in style presets: default, primary, secondary (inherited from VaButton). You can switch between them via buttons-preset prop.

Open in GitHub

Color
#

Set different colors using color prop. You can either user theme string HEX color value.

Open in GitHub

Gaps
#

gapped prop allows you to add distance between pagination items.

Open in GitHub

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.

Open in GitHub

Borders
#

Specifying border-color prop will add borders to the pagination items.

Open in GitHub

Rounded
#

rounded prop makes your pagination items rounded.

Open in GitHub

Active pagination button color
#

You can specify color of the current pagination item via active-page-color prop.

Open in GitHub

Custom icons
#

Feeling the need to change icons for arrows? We have 4 props to enable full customization of va-pagination component.

Open in GitHub

Using HTML input instead of pages
#

With input prop you can have input with arrow buttons instead of default pagination.

Open in GitHub

Using total and page-size
#

You 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.

Items from 11 to 20
Open in GitHub

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.

Items from 3 to 12
Open in GitHub

API
#

Props #

NameDescriptionTypesDefault
activePageColor

String

""

ariaGoToLastPageLabel

String

"$t:goLastPage"

ariaGoToNextPageLabel

String

"$t:goNextPage"

ariaGoToPreviousPageLabel

String

"$t:goToPreviousPage"

ariaGoToSpecificPageInputLabel

String

"$t:goToSpecificPageInput"

ariaGoToSpecificPageLabel

String

"$t:goToSpecificPage"

ariaGoToTheFirstPageLabel

String

"$t:goToTheFirstPage"

ariaLabel

String

"$t:pagination"

borderColor

String

""

boundaryIconLeft

String

"va-arrow-first"

boundaryIconRight

String

"va-arrow-last"

boundaryLinks

Boolean

true

boundaryNumbers

Boolean

false

buttonsPreset

String

"primary"

color

String

"primary"

directionIconLeft

String

"va-arrow-left"

directionIconRight

String

"va-arrow-right"

directionLinks

Boolean

true

disabled

Boolean

false

gapped

Boolean

false

hideOnSinglePage

Boolean

false

input

Boolean

false

modelValue

Number

1

pages

Number

0

pageSize

Number

null

preset

String

-

rounded

Boolean

false

size

String

"medium"

stateful

Boolean

false

total

Number

null

visiblePages

Number

0

Events #

NameDescription

update:modelValue

The event is triggered when the component needs to change the model. Is also used by v-model

Slots #

NameDescription

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 #

NameDefault 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?
#

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?
#

Yep. In v-model you'll get item number instead of page number.