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).

Pagination · <uz-pagination>

PropTipoDefectoDescripción
pagenumber1Página actual, empieza en 1.
pageCountnumber1Total de páginas.
siblingsnumber1Páginas vecinas a cada lado de la actual.
EventoDescripción
onPageChange{ page }, cancelable.
Parte CSSDescripción
uz-pagination::part(base)El <nav>.