Pagination is a sequence of numbers assigned to pages. It helps split up large content into shorter, easier and more breathable pages.
The pagination component consists of several elements, all of which are optional. So with no extra class, your pagination links will look as follow :
To customize the previous and next page icons change the value of the
By default, their values are respectively arrow_back and arrow_forward.
Vuesax uses the Google Material Icons font library. For a list of all available icons, visit the official Material Icons page.
FontAwesome and other fonts library are supported. Simply use the
fas. You still need to include the Font Awesome icons in your project.
By default Vuesax will show a maximum of 9 links. This default behaviour can be changed by setting the
max directive to a different integer value.
The amount given to the
max directive should take into account the first and last pages plus the ellipses "
max directive to a value lesser then
5 when the
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 directive will allow users to directly jump to a desired page.
If the value given is lower than 1 it will jump to page 1. However if the value is greater than
total it will jump to the last page.
You can change the color of the component with the property
color, you can use the Main colors or RGB and HEX colors
Only RGB and HEX colors are supported.
You can also update page number from outside of pagination component.
|total||Number||The total links the pagination will have||false|
|max||Number||The maximum pages that should be shown||9|
|goto||Boolean||true, false||Allows you to jump to a specific page||false|
|prev-icon||String||Customize the previous button icon||chevron_left|
|next-icon||String||Customize the next button icon||chevron_right|
|icon-pack||String||Icon Pack Class Name||Icon Pack to be used. If not set, icon will default to Material Icons. ex. FA4 uses fa or fas, FA5 uses fas, far, or fal.||material-icons|
|color||String||Change the color of the pagination||primary|