'/%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}
Datos
Carousel
Diapositivas que deslizas o recorres, con puntos y una reproducción automática que se puede detener. PageIndicator muestra la posición por sí solo: puntos, barras o números.
import { Carousel, PageIndicator } from '@alea/ui';
Ejemplos
Carrusel
Flechas, puntos, deslizar; la reproducción automática se detiene con hover, foco y con el botón.
Varias por vista
perView muestra más de una a la vez.
PageIndicator
Dónde estás en un conjunto de páginas: puntos, barras o números. Cada punto es un botón cuando onChange está definido.
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-control…--alea-gradient-accent-linear…--alea-text-muted…
Space
--alea-space-3…
Radius
--alea-radius-full…--alea-radius-lg…
Motion
--alea-motion-duration-base…--alea-motion-ease-out…
Component
--alea-per-view…
Props
Carousel props
Diapositivas que deslizas o recorres, con puntos y una reproducción automática opcional que se puede pausar (patrón de carrusel de WAI-ARIA).
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
aria-labelobligatoria | string | - | Nombre del carrusel para lectores de pantalla. |
childrenobligatoria | ReactNode[] | - | Las diapositivas. |
autoplay | number | - | Avanza solo cada n ms (se pausa con hover, foco y con movimiento reducido; tiene un botón de pausa). |
className | string | - | Clases extra para el elemento raíz. |
perView | number | 1 | Diapositivas visibles a la vez. Por defecto 1. |
showDots | boolean | true | Muestra los puntos. Por defecto true. |
PageIndicator props
Muestra dónde estás en un conjunto de páginas: pantallas de onboarding, un carrusel, una galería. Cada punto es un botón cuando onChange está definido.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
countobligatoria | number | - | Cuántas páginas. |
currentobligatoria | number | - | La página actual, desde 0. |
aria-label | string | - | Nombre para lectores de pantalla. Por defecto "Páginas". |
className | string | - | Clases extra. |
onChange | ((index: number) => void) | - | Se llama con la página a la que ir; omítelo para un indicador solo visual. |
variant | "dots" | "bars" | "numbers" | 'dots' | dots (por defecto), bars (el actual se estira) o numbers ("2 / 5"). |
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.
Carousel
- Estados
- Hover (CSS)
- 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-carousel.alea-carousel-controls.alea-carousel-track.alea-carousel-slide.alea-carousel-dots.alea-carousel-dot
PageIndicator
- Variantes
variantdotsbarsnumbers- Estados
- Current
- 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-page-indicator.alea-page-dot- Atributos data
data-variant=barsdata-variant=dotsdata-variant=numbers
Accesibilidad
- El patrón de carrusel de WAI-ARIA: una región con etiqueta de diapositivas, "n de m".
- La reproducción automática se detiene con el mouse encima y con foco, nunca corre con movimiento reducido y tiene un botón para detenerla.
- Las diapositivas fuera de vista son inertes.
Teclado
| Tecla | Acción |
|---|---|
| Tab | Enfoca las diapositivas, luego los controles |
| Flecha izquierda / Derecha | Diapositiva anterior o siguiente |
| Espacio | Pausa la reproducción automática (en el botón de pausa) |
Qué hacer y qué evitar
Hacer
- Deja la reproducción automática apagada salvo que el contenido sea decorativo.
Evitar
- No pongas contenido crítico solo en las últimas diapositivas.