Pagination

El componente v-pagination es utilizado para separar grandes conjuntos de datos de maner que sea más fácil para el usuario consumir la información. Dependiendo de la longitud que sea proveída, el componente de paginación escalará automáticamente. Para mantener la página actual, simplemente agrega un atributo v-model.

Uso

Pagination displays all pages if parent container is big enough.

API

v-pagination
Nombre
circle
Default
false
Type
boolean

Los elementos de paginación son de forma circular

Nombre
color
Default
undefined
Type
string

Aplica el color especificado al control.

Nombre
dark
Default
false
Type
boolean

Aplica la variante del tema dark

Nombre
disabled
Default
false
Type
boolean

Deshabilita el componente

Nombre
length
Default
0
Type
number

La longitud del paginador

Nombre
light
Default
false
Type
boolean

Aplica la variante del tema light

Nombre
next-icon
Default
'$vuetify.icons.next'
Type
string

Especifica el ícono para siguiente

Nombre
prev-icon
Default
'$vuetify.icons.prev'
Type
string

Especifica el ícono para anterior

Nombre
total-visible
Default
undefined
Type
number | string

Especifica el máximo total visible de números de paginación

Nombre
value
Default
0
Type
number

La página seleccionada actual

Ejemplos

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.

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore