Files
fn_registry/frontend/functions/ui/pagination.md
T
egutierrez 97a3c84625 refactor: migrate frontend from shadcn/Tailwind to Mantine v9
Reescribe todos los componentes UI para usar Mantine v9 en lugar de shadcn/Tailwind.
Elimina cn(), CVA, components.json, theme_provider custom y globals.css con Tailwind.
Añade 25+ componentes nuevos (AppShell, AuthForm, DatePickerInput, Dropzone, etc.)
y MantineProvider como wrapper estándar del sistema de temas.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-06 23:46:44 +02:00

2.0 KiB

name, kind, lang, domain, version, purity, signature, description, tags, uses_functions, uses_types, returns, returns_optional, error_type, imports, output, tested, tests, test_file_path, file_path, props, emits, has_state, framework, variant
name kind lang domain version purity signature description tags uses_functions uses_types returns returns_optional error_type imports output tested tests test_file_path file_path props emits has_state framework variant
pagination component ts ui 1.0.0 impure Pagination(props: PaginationProps): JSX.Element Controles de navegacion de paginas autocontenido. Mantine Pagination.
pagination
navigation
component
ui
mantine
false
@mantine/core
Componente Pagination autocontenido que renderiza controles de navegacion de paginas false
frontend/functions/ui/pagination.tsx
name type required description
total number true Numero total de paginas
name type required description
value number false Pagina actual (controlado)
name type required description
defaultValue number false Pagina inicial (no controlado)
name type required description
onChange (page: number) => void false Callback al cambiar de pagina
name type required description
siblings number false Paginas visibles a cada lado de la actual
name type required description
boundaries number false Paginas visibles al inicio y final
name type required description
withEdges boolean false Mostrar botones first/last page
name type required description
className string false Clases CSS adicionales
onChange
false react

Ejemplo

// Basico
<Pagination total={10} defaultValue={1} />

// Controlado
<Pagination total={20} value={page} onChange={setPage} />

// Con botones first/last
<Pagination total={50} withEdges siblings={2} />

Notas

Usa Mantine Pagination autocontenido. Previous/Next, numeros de pagina y elipsis se generan automaticamente. La API anterior con sub-componentes (PaginationContent, PaginationItem, PaginationLink, etc.) fue reemplazada por un unico componente con props declarativas. Export: Pagination y PaginationProps.