Become a patron
# 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 :
# Icons
To customize the previous and next page icons change the value of the prev-icon and prev-icon directives.
By default, their values are respectively arrow_back and arrow_forward.
TIP
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 icon-pack with fa or fas. You still need to include the Font Awesome icons in your project.
# Limit the amount of links shown
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.
TIP
The amount given to the max directive should take into account the first and last pages plus the ellipses "..."
WARNING
Setting the 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
The 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 total it will jump to the last page.
# Programmatic Inc/Dec
You can also update page number from outside of pagination component.
Current: 5
API #
| Name | Type | Parameters | Description | default |
|---|---|---|---|---|
| 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 |