Pagination

Vista previa

Este ejemplo usa estilos solo para documentación. En producción, utiliza una de las recetas incluidas (CSS, Tailwind o UnoCSS).

Page navigation with prev/next and page numbers.

#Uso

Compón Root, Content, Item, PreviousButton, NextButton, Ellipsis.

import * as Pagination from "@solidiom/pagination"

;<Pagination.Root>Contenido de Pagination</Pagination.Root>

#Instalación

Instala el paquete con pnpm add @solidiom/pagination. El paquete requiere dependencias pares compatibles de solid-js y @solidjs/web.

#Partes

Pagination expone 6 partes:

• Root — data-part="root".
• Content — data-part="content".
• Item — data-part="item".
• PreviousButton — data-part="previousbutton".
• NextButton — data-part="nextbutton".
• Ellipsis — data-part="ellipsis".

#Estilos

Pagination lleva los atributos data-scope="pagination" y data-part en cada parte para la selección CSS/receta. Los atributos de estado como data-state, data-disabled y data-highlighted se exponen donde corresponda.

#Interacción con teclado

#Composición

Pagination está diseñado para componerse con otras primitivas. Sus partes pueden combinarse con Field, Button u otras primitivas según sea necesario.

#Renderizado SSR e hidratación

Pagination se renderiza como HTML semántico durante el renderizado en servidor. El comportamiento interactivo (manejadores de teclado, gestión de estado) se activa en la hidratación sin desplazamiento de diseño.

solidiom add pagination