Pagination
The v-pagination
component is used to separate long sets of data so that it is easier for a user to consume information. Depending on the length provided, the pagination component will automatically scale. To maintain the current page, simply supply a v-model
attribute.
API
Shape pagination elements as circles
Applies specified color to the control - it can be the name of material color (for example success
or purple
) or css color (#033
or rgba(255, 0, 0, 0.5)
)
Applies the dark theme variant
Disables component
The length of the paginator
Applies the light theme variant
Specify the icon to use for the next icon
Specify the icon to use for the prev icon
Specify the max total visible pagination numbers
Current selected page
Examples
Long
When the number of page buttons exceeds the parent container, the component will truncate the list.
Limit
You can also manually set the maximum number of visible page buttons with the total-visible
prop.
Round
The alternate style for pagination is circle pages.
Icons
Previous and next page icons can be customized with prev-icon
and next-icon
props.
Disabled
Pagination items can be manually deactivated.