Todos los componentes (204)

Paginación

Navegación · Pagination · .amset-pagination

Qué es y cuándo usarlo

Los controles de página de cualquier lista, no solo de la tabla: anterior y siguiente, los números con huecos («1 … 8 9 10 11 12 … 14»), el recuento «11-20 de 137 facturas» y, si se piden, primera y última, salto directo y filas por página.

Cuándo usarlo

Listas de resultados que se recorren por páginas y en las que importa saber dónde se está (facturas, pedidos, clientes).
total y size cuando se sabe cuántos hay: salen el recuento y las páginas. Solo pages cuando el servidor dice cuántas páginas hay y no cuántos elementos.
skip a partir de unas veinte páginas; ends cuando hay muchas y se va a menudo al principio o al final.
shape="compact" donde no caben los números: «Página 2 de 5» entre las dos flechas.
label si hay dos en la misma pantalla («Páginas de pedidos», «Páginas de clientes»): si las dos se llaman «Paginación», el lector no las distingue.
itemNames con { singular, plural } para que el recuento concuerde: «1 de 1 factura», «11-20 de 42 facturas».

Cuándo no

Dentro de una Table: ya la trae con su prop pagination.
Para listas que se van alargando al final: LoadMoreButton, que dice cuántos van de cuántos.
Con miles de filas que se quieren recorrer seguidas: VirtualList.

Teclado: Tab recorre los botones; los deshabilitados (anterior en la primera página, siguiente en la última) no cogen foco. Intro o Espacio los pulsan. Si al llegar a un extremo se apaga el botón que tenía el foco, el foco pasa a la página actual (o, en la forma compacta, a la otra flecha) en vez de perderse. El salto directo es un formulario: se escribe el número y se pulsa «Ir» o Intro; un número fuera de rango se acota a la primera o la última página.

Accesibilidad: es un nav llamado «Paginación», o lo que diga label. El recuento va en un role="status", así que el cambio de página se anuncia. La página actual lleva aria-current="page" además del botón relleno, cada número se llama «Página 7» y los huecos «…» no se leen. Los números se escriben con el idioma («1.240»). «Ir» es un botón de verdad, no solo la tecla Intro: con el dedo no hay Intro.

Contexto: va dentro de LocaleProvider (o de AmsetProvider), que decide cómo se escriben los números.

Aspecto fino: sin variables propias: se ajusta con las clases amset-pagination, amset-pagination__number y amset-pagination__count. Los botones son Button e IconButton en tamaño sm, así que también responden a --amset-button-*.

Cómo se ve

<Pagination page={pagina} total={240} size={25} onPageChange={setPagina} />

Props

Se importa con import { Pagination } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`onPageChange`obligatoria	`(page: number) => void`	—
`page`obligatoria	`number`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`disabled`	`boolean`	—
`ends`	`boolean`	Botones de primera y ultima pagina.
`itemNames`	`ItemNames`	Como se llama lo que se esta paginando, para el recuento.
`label`	`string`	Nombre de la navegacion. Por defecto «Paginación»: con dos en la misma pagina, cada una el suyo («Páginas de pedidos»), o el lector las confunde.
`onPageSizeChange`	`(size: number) => void`	—
`pages`	`number`	Cuando el servidor solo dice cuantas paginas hay.
`renderPage`	`(page: number, state: { readonly current: boolean; }) => ReactNode`	Pinta el contenido del boton de cada pagina (un numero con un punto de aviso, un nombre de seccion). El boton sigue llamandose «Página N» para el lector de pantalla. Solo con `shape="full"`: la compacta no tiene botones.
`shape`	`PaginationShape`	`full` pinta los numeros de pagina; `compact`, solo anterior y siguiente.
`showCount`	`boolean`	"1-10 de 42 facturas". Necesita el total.
`size`	`number`	—
`sizes`	`readonly number[]`	—
`skip`	`boolean`	Campo para ir directo a una pagina. Util a partir de veinte paginas.
`total`	`number`	Cuantos elementos hay en total; las paginas salen de aqui y de `size`.
`window`	`number`	Cuantos numeros se ven alrededor del actual.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-pagination-gap`	`var(--amset-space-3)`
`--amset-pagination-font`	`var(--amset-text-sm)`

Cómo se cambia

.amset-pagination {
  --amset-pagination-gap: ...;
  --amset-pagination-font: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: