'/%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
Steps
Avance en una secuencia conocida: pasos listos, actual y pendientes, horizontal o vertical.
import { Steps } from '@alea/ui';
Ejemplos
Steps
Los pasos completados se pueden volver a visitar con onStepPress.
Vertical
Para paneles laterales y flujos largos.
Errores, pasos opcionales, tamaños y estilos
El estado de un paso puede ser error o warning; isOptional lo marca; size sm, variant dots o icons, y etiquetas debajo de los marcadores.
Configuraciones
Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.
- Label Placement
labelPlacement - Orientation
orientation - Responsive
responsive - Size
size - Variant
variant
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-accent…--alea-accent-on…--alea-accent-subtle…--alea-border-strong…--alea-chip-bg…--alea-chip-text…--alea-status-danger…--alea-status-danger-on-solid…--alea-status-danger-solid…--alea-status-warning-on-solid…--alea-status-warning-solid…--alea-surface-raised…--alea-text-faint…--alea-text-muted…
Space
--alea-space-2…--alea-space-3…--alea-space-4…--alea-space-5…
Radius
--alea-radius-sm…
Type
--alea-font-family-body…--alea-font-size-md…--alea-font-size-sm…--alea-font-size-xs…--alea-font-weight-regular…--alea-font-weight-semibold…
Motion
--alea-motion-duration-base…--alea-motion-duration-slow…--alea-motion-ease-out…
Props
Steps props
Avance en una secuencia conocida: pasos completados, actual y siguientes.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
currentobligatoria | Key | - | El paso en curso (por id). Los anteriores se muestran como completados. |
stepsobligatoria | Step[] | - | Los pasos: id, title, description opcional. |
aria-label | string | - | Nombre de la lista. Por defecto "Progreso". |
className | string | - | Clases extra para el elemento raíz. |
labelPlacement | "end" | "below" | - | Solo horizontal: el texto junto al marcador (end, por defecto) o debajo (centrado). |
onStepPress | ((id: Key) => void) | - | Permite volver a pasos terminados. |
orientation | "horizontal" | "vertical" | 'horizontal' | horizontal (por defecto) o vertical. |
responsive | boolean | true | Los pasos horizontales pasan a verticales en teléfonos (por debajo de 640 px). Por defecto true. |
size | "sm" | "md" | - | sm (marcadores de 24 px) o md (32 px, por defecto). |
variant | "dots" | "numbers" | "icons" | 'numbers' | numbers (por defecto), dots (marcadores pequeños, para flujos compactos) o icons (el ícono de cada paso). |
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
labelPlacementendbeloworientationhorizontalverticalsizesmmdvariantdotsnumbersicons- Estados
- Hover (CSS)
- Motion
- draw
- 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-steps.alea-step-dot.alea-step-text.alea-step-title.alea-step-optional.alea-step-desc.alea-step.alea-step-button- Atributos data
data-status=currentdata-status=donedata-status=upcomingdata-orientation=horizontaldata-orientation=verticaldata-responsivedata-status=errordata-status=warningdata-size=smdata-variant=dotsdata-variant=iconsdata-label-placement=below
Accesibilidad
- Una lista ordenada; el paso actual tiene aria-current="step" y los listos lo dicen.
Teclado
| Tecla | Acción |
|---|---|
| Tab | Va a los pasos a los que puedes volver |
| Enter | Va a ese paso (con onStepPress) |
Qué hacer y qué evitar
Hacer
- Nombra los pasos por lo que pasa: Cuenta, Plan, Pago.
Evitar
- No lo uses para más de seis pasos.