Pagination
Paginación numerada que se compacta en móvil.
Usar
import { Pagination } from "@unozero-ai/ui/react";
<Pagination></Pagination>Lo básico
Pagination recibe page (empieza en 1) y pageCount. Al pulsar, se mueve a esa página y emite onPageChange con { page } en detail; tú guardas la página y pides los datos. En el kit React onPageChange recibía el número; ahora recibe el evento. Si lo cancelas con preventDefault(), se queda donde está: sirve para no salir de una página con cambios sin guardar.
Con siete páginas o menos se ven todas. Úsala cuando el lector necesita volver a una página concreta, como en un listado de facturas; para un historial que solo se recorre hacia abajo, usa InfiniteScroll.
Muchas páginas
Con más páginas, la primera y la última quedan siempre a la vista y el resto se resume en puntos suspensivos alrededor de la actual. En pantallas estrechas desaparecen los botones de ir a la primera y a la última página, y aun así la fila mide unos 340 px: en un contenedor más estrecho pasa a dos líneas. Si vive en un panel angosto, usa siblings={0}.
Páginas vecinas
siblings dice cuántas páginas se ven a cada lado de la actual (1 por defecto). Con 0 la fila es la más corta posible, para barras laterales y paneles estrechos. Con 2 o más se salta más rápido, pero en móvil la fila se parte en dos líneas: resérvalo para vistas anchas.
Con resumen de resultados
Acompaña la paginación con el rango que se está viendo y el total. Los botones solo dicen en qué página estás; cuántas conversaciones hay lo dice el texto, y es lo primero que alguien quiere saber de un listado.
Conversaciones 1–20 de 248
API
Generada del custom-elements.json que publica @unozero-ai/ui. Las partes se estilan desde tu CSS con el nombre del elemento: uz-button::part(base).