'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Navegación
Pagination
Recorre páginas de resultados, con la parte media larga resumida.
import { Pagination } from '@alea/ui';
Ejemplos
Pagination
La parte larga del medio se pliega alrededor de la página actual.
Page 6 of 24
Compacta
Para teléfonos y barras de herramientas estrechas.
Total, tamaño de página, primera y última, saltar
totalItems con pageSize muestra "1-10 de 248"; onPageSizeChange agrega un select de tamaño de página; showFirstLast y showJumper para listas largas; tres tamaños.
Configuraciones
Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.
- Appearance
appearance - Show First Last
showFirstLast - Show Jumper
showJumper - Size
size
Estados
Cada estado de interacción, forzado para compararlos, en ambos temas.
Oscuro
Claro
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-border…--alea-chip-bg…--alea-chip-text…--alea-field-bg…--alea-surface-hover…--alea-text…--alea-text-faint…--alea-text-muted…
Space
--alea-space-2…--alea-space-3…
Radius
--alea-radius-full…--alea-radius-sm…
Type
--alea-font-family-body…--alea-font-size-md…--alea-font-size-sm…--alea-font-weight-medium…
Motion
--alea-motion-duration-fast…
Props
Pagination props
Recorre páginas de resultados. La página actual se marca para lectores de pantalla.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
onChangeobligatoria | (page: number) => void | - | Se llama con el nuevo número de página. |
pageobligatoria | number | - | Página actual, desde 1. |
totalobligatoria | number | - | Total de páginas. |
appearance | "pages" | "compact" | 'pages' | compact muestra "3 de 12" entre las flechas en lugar de números de página. |
aria-label | string | - | Nombre para lectores de pantalla. Por defecto "Paginación". |
className | string | - | Clases extra para el elemento raíz. |
onPageSizeChange | ((size: number) => void) | - | Se llama con el nuevo tamaño de página. |
pageSize | number | - | Filas por página, para mostrar un select de tamaño de página con onPageSizeChange. |
pageSizeOptions | number[] | - | Los tamaños de página a ofrecer. Por defecto 10, 25, 50, 100. |
showFirstLast | boolean | - | Agrega botones de primera y última página. |
showJumper | boolean | - | Un campo para saltar a una página. |
siblings | number | 1 | Páginas mostradas a cada lado de la actual. Por defecto 1. |
size | "sm" | "md" | "lg" | - | Botones sm (28 px), md (36 px, por defecto) o lg (44 px). |
totalItems | number | - | Todos los elementos, para mostrar "1-10 de 248" (necesita pageSize). |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
- Variantes
appearancepagescompactsizesmmdlg- Estados
- Hover (CSS)Disabled
- Motion
- press
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-pagination.alea-page.alea-page-status.alea-page-gap.alea-pagination-bar.alea-pagination-total.alea-pagination-controls.alea-pagination-size.alea-cal-select.alea-pagination-jump.alea-pagination-input- Atributos data
data-size=smdata-size=lg
Accesibilidad
- Un landmark de navegación; cada botón de página se llama "Página n" y el actual tiene aria-current.
Teclado
| Tecla | Acción |
|---|---|
| Tab | Se mueve entre los botones de página |
| Enter o Espacio | Va a esa página |
Qué hacer y qué evitar
Hacer
- Mantén visible el total.
- Usa compact en pantallas angostas.
Evitar
- No pagines listas cortas: muéstralas completas o carga más.