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.
Limit the amount of links shown
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.