'/%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}
Formularios
WheelPicker
Ruedas que giran para elegir, como el selector de un teléfono: una o varias columnas, columnas que dan la vuelta para horas y minutos, cinco o más filas visibles. Desliza, haz scroll, haz clic en una fila o usa las flechas.
import { WheelPicker } from '@alea/ui';
Ejemplos
WheelPicker
Ruedas con scroll como el selector de un teléfono: una o varias columnas. Desliza o haz scroll y la fila del medio es la elegida; haz clic en una fila; o enfoca una columna y usa las flechas.
1 × Navy, size M
Anatomía
Las partes del componente y la clase que da estilo a cada una.
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-surface-deep…--alea-surface-raised…
Space
--alea-space-1…--alea-space-2…
Radius
--alea-radius-lg…--alea-radius-sm…
Component
--alea-wheel-row…
Props
WheelPicker props
Ruedas con scroll para elegir, como el selector de un teléfono: una o varias columnas (horas y minutos, talla y color). Desliza, haz scroll, haz clic en una fila, o usa las flechas.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
columnsobligatoria | WheelColumn<string | number>[] | - | Una o más columnas lado a lado. |
aria-label | string | - | Nombre de todo el selector. |
className | string | - | Clases extra. |
defaultValue | Record<string, string | number> | - | Los valores elegidos al inicio. Por defecto el primer elemento de cada columna. |
onChange | ((value: Record<string, string | number>) => void) | - | Se llama con el valor de cada columna cuando una cambia. |
rowHeight | number | ROW | Altura de fila en px. Por defecto 40 (44 en pantallas táctiles). |
value | Record<string, string | number> | - | El valor elegido de cada columna, por id de columna (controlado). |
visibleRows | number | 5 | Cuántas filas se muestran. Los números impares centran la elección. Por defecto 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.
- 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-wheel.alea-wheel-band
Accesibilidad
- Cada columna es un spinbutton con el nombre de su etiqueta, y el valor elegido como texto.
- La rueda que gira es una comodidad para el puntero; el teclado y los lectores de pantalla usan el spinbutton.
- Las filas miden al menos 44 px en pantallas táctiles.
Teclado
| Tecla | Acción |
|---|---|
| Flecha arriba / Abajo | Valor anterior o siguiente |
| Re Pág / Abajo | Cinco valores |
| Inicio / Fin | Primer o último valor |
| Tab | Siguiente columna |
Qué hacer y qué evitar
Hacer
- Úsalo en pantallas táctiles para listas cortas (tallas, cantidades, horas).
Evitar
- No lo uses para listas largas: usa Select con búsqueda.