Pagination
Un componente de paginación para navegar a través de contenido dividido en páginas.
import { Pagination } from "stofli-ui";Un componente de paginación básico con números de página y flechas de navegación.
El componente de paginación está disponible en diferentes variantes de color.
El componente de paginación está disponible en tres tamaños: sm, md y lg.
Usando withEdges={true}, muestra botones adicionales para ir a la primera y última página.
Usando withText={true}, añade texto descriptivo a los botones de navegación.
Puedes personalizar el texto que aparece en los botones de navegación usando la propiedad customText.
Usando las propiedades showPrevious y showNext, puedes controlar qué botones de navegación se muestran. Esto es útil para la primera o última página.
Usando fullWidth={true}, el componente ocupará todo el ancho disponible de su contenedor y aplicará un diseño con espacio entre los botones (justify-between).
Un componente de paginación deshabilitado que no permite interacción.
Puedes personalizar cualquier parte del componente usando la propiedad className general o las propiedades específicas de classNames con clases de Tailwind CSS.
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
totalPages | number | - | Número total de páginas (requerido) |
currentPage | number | 1 | Página actual |
onPageChange | (page: number) => void | - | Función que se ejecuta al cambiar de página |
siblingsCount | number | 1 | Número de páginas adyacentes a mostrar |
variant | "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "default" | Variante de color del componente |
size | "sm" | "md" | "lg" | "md" | Tamaño del componente |
withNumbers | boolean | true | Mostrar números de página |
withEdges | boolean | false | Mostrar botones para ir a la primera y última página |
withText | boolean | false | Mostrar texto en los botones de navegación |
disabled | boolean | false | Deshabilitar el componente |
className | string | - | Clases adicionales para el componente principal |
fullWidth | boolean | false | Ocupar todo el ancho disponible y aplicar space-between |
customText | object | { previous: "Anterior", next: "Siguiente", first: "Primera", last: "Última", pageLabel: "Página", navigationLabel: "Paginación", statusText: "Página {current} de {total}" } | Personalizar el texto de los botones de navegación |
showPrevious | boolean | true | Mostrar el botón de navegación hacia atrás |
showNext | boolean | true | Mostrar el botón de navegación hacia adelante |
navButtonClassName | string | - | Clases para los botones de navegación |
activePageClassName | string | - | Clases para la página activa seleccionada |
pageButtonClassName | string | - | Clases para los botones de página |
ellipsisClassName | string | - | Clases para los elementos de elipsis |
indicatorClassName | string | - | Clases para el indicador animado |
numbersContainerClassName | string | - | Clases para el contenedor de números de página |
id | string | - | ID personalizado para el componente |
aria-label | string | - | Etiqueta ARIA personalizada para el componente |