Pagination

Pagination is a sequence of numbers assigned to pages. It helps split up large content into shorter, easier and more breathable pages.

Default

The pagination component consists of several elements, all of which are optional. So with no extra class, your pagination links will look as follow :

Filled

The vs-type="filled" directive will add a background to your links

Rounded

The vs-rounded directive will round the borders of the pagination links.

Icons

To customize the previous and next page icons change the value of the vs-prev-icon and vs-prev-icon directives. By default, their values are respectively arrow_back and arrow_forward.

TIP

Vuesax use the Google Material Icons font library. For a list of all available icons, visit the official Material Icons page.

By default Vuessax will show a maximum of 9 links. This default behaviour can be changed by setting the vs-max directive to a different integer value.

TIP

The amount given to the vs-max directive should take into account the first and last pages plus the ellipses "..."

WARNING

Setting the vs-max directive to a value lesser then 5 when the vs-total is greater then that will result in the pagination only showing the previous/next buttons as well as the first and last links.

Goto

The vs-goto directive will allow users to directly jump to a desired page.

TIP

If the value given is lower than 1 it will jump to page 1. However if the value is greater than vs-total it will jump to the last page.

Colors

You can change the color of the component with the property vs-color, you can use the Main colors or RGB and HEX colors

WARNING

Only RGB and HEX colors are supported.

API #

NameTypeParametersDescriptiondefault
vs-totalNumberThe total links the pagination will havefalse
vs-currentNumberThe current pagefalse
vs-maxNumberThe maximum pages that should be shown9
vs-gotoBooleantrue, falseAllows you to jump to a specific pagefalse
vs-typeStringThe styling that should be applied to the pagination linksfalse
vs-roundedBooleantrue, falseShould pagination link borders be rounded or notfalse
vs-prev-iconStringCustomize the previous button iconchevron_left
vs-next-iconStringCustomize the next button iconchevron_right
pageEventFired when the current page changesfalse
vs-colorStringChange the color of the paginationprimary