El componente Pagination organiza y divide el contenido extenso en secciones más pequeñas y manejables. Utilizado en vistas con grandes conjuntos de datos como listas, tablas o resultados de búsqueda.
Previous · Pages · Ellipsis · Next
Importa los estilos base y los sub-componentes de Pagination.
1import 'nave-ui-library/styles.css'2import {3 Pagination,4 PaginationContent,5 PaginationItem,6 PaginationLink,7 PaginationNext,8 PaginationPrevious,9 PaginationEllipsis,10} from 'nave-ui-library/react'Ejemplo estándar con números y controles de navegación. El elemento con isActive tomará automáticamente el color de marca.
Uso de la propiedad disabled para deshabilitar la navegación cuando no hay más páginas disponibles.
Integración de la paginación dentro de un Card para contextos de lista con datos paginados.
Todas las props disponibles para el componente Pagination.
| Prop | Type | Default | Description |
|---|---|---|---|
currentPage | number | — | Índice de la página actual (basado en 1). |
totalPages | number | — | Cantidad total de páginas disponibles. |
onPageChange | (page: number) => void | — | Callback ejecutado al hacer clic en un número de página o en las flechas de navegación. |
siblingCount | number | 1 | Número de páginas adyacentes a mostrar a cada lado de la página actual. |
isActive | boolean | false | Marca el enlace como página activa (PaginationLink). |
disabled | boolean | false | Desactiva el control de navegación. |
hrefreq | string | — | URL de destino del enlace. |
className | string | — | Clases CSS adicionales para personalización. |
1{2 "name": "Pagination",3 "description": "Componente de navegación jerárquica para fragmentar grandes listas de datos en páginas accesibles.",4 "component": "Pagination",5 "files": [6 "components/base/navegation/Pagination.tsx"7 ],8 "dependencies": [9 "react",10 "lucide-react"11 ],12 "props": {13 "currentPage": {14 "type": "number",15 "required": true,16 "description": "Índice de la página actual (basado en 1)."17 },18 "totalPages": {19 "type": "number",20 "required": true,21 "description": "Cantidad total de páginas disponibles."22 },23 "onPageChange": {24 "type": "(page: number) => void",25 "description": "Callback ejecutado al hacer clic en un número de página o en las flechas de navegación."26 },27 "siblingCount": {28 "type": "number",29 "default": 1,30 "description": "Número de páginas adyacentes a mostrar a cada lado de la página actual."31 }32 }33}