Estructura y Layout
Paginator
Un componente de paginacion con navegacion de paginas, selector de tamano de pagina e integracion con Laravel.
Tests
0%
Uso
El componente SPaginator renderiza controles de paginacion. Proporciona page, size y total para calcular los numeros de pagina automaticamente.
Tamanos de Pagina
Usa la prop pageSizes para mostrar un selector desplegable que permite cambiar el numero de resultados por pagina.
Ocultar Numeros
Establece hideNumbers en true para mostrar solo las flechas de navegacion anterior y siguiente sin numeros de pagina.
Props
| Prop | Tipo | Default | Descripcion |
|---|---|---|---|
page | number | - | El numero de pagina actual (v-model:page) |
size | number | - | El numero de elementos por pagina (v-model:size) |
total | number | - | El numero total de elementos |
count | number | - | El numero total de paginas (sobreescribe el calculo total/size) |
pageSizes | number[] | - | Arreglo de opciones de tamano de pagina para el selector |
paginatorSize | string | - | Numero de botones de pagina a mostrar alrededor de la pagina actual |
hideNumbers | boolean | false | Oculta los botones de numero de pagina |
hideWhenSinglePage | boolean | false | Oculta el paginador cuando solo hay una pagina |
canGoPrev | boolean | - | Sobreescribe si el boton anterior esta habilitado |
canGoNext | boolean | - | Sobreescribe si el boton siguiente esta habilitado |
laravel | TLaravelPagination | TLaravelResource | - | Respuesta de paginacion de Laravel para integracion automatica |
inertiaRouter | Router | - | Router de Inertia.js para navegacion del lado del servidor |
class | string | - | Clases CSS adicionales |
Eventos
| Evento | Payload | Descripcion |
|---|---|---|
change | { page?: number, size?: number, dir?: 'prev' | 'next' } | Se emite en cualquier cambio de paginacion |
update:page | number | Se emite cuando la pagina actual cambia |
update:size | number | Se emite cuando el tamano de pagina cambia |