'/%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}
Extras
CodeSteps
Pasos numerados con el texto a un lado y el código al otro: una guía de instalación, una configuración, una migración. En pantallas angostas se apilan.
import { CodeSteps } from '@alea/ui';
Ejemplos
CodeSteps
Pasos numerados con el texto junto al código: una guía de instalación en tres pasos.
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-border-strong…--alea-surface-raised…--alea-text…--alea-text-muted…
Space
--alea-space-2…--alea-space-3…--alea-space-4…--alea-space-8…
Radius
--alea-radius-full…
Type
--alea-font-family-body…--alea-font-leading-relaxed…--alea-font-size-lg…--alea-font-size-sm…--alea-font-weight-semibold…
Motion
--alea-motion-duration-slow…--alea-motion-ease-out…
Props
CodeSteps props
Pasos numerados con el texto a un lado y el código al otro: una guía de instalación, una configuración, una migración. Se apilan en pantallas estrechas.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
stepsobligatoria | CodeStep[] | - | |
className | string | - | Clases extra para el elemento raíz. |
headingLevel | 2 | 3 | 4 | 3 | Nivel de título de cada paso, para encajar en el esquema de la página. Por defecto 3. |
start | number | 1 | Número desde el que se empieza a contar. Por defecto 1. |
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-codesteps.alea-codesteps-step.alea-codesteps-num.alea-codesteps-text.alea-codesteps-title.alea-codesteps-desc.alea-codesteps-code- Atributos data
data-code
Accesibilidad
- Una lista ordenada: los lectores de pantalla dicen cuántos pasos hay y en cuál estás.
- Cada paso tiene un título real, así los pasos aparecen en el esquema de la página.
- Los números se dibujan para la vista y se ocultan a los lectores de pantalla; la lista cuenta por ellos.
Qué hacer y qué evitar
Hacer
- Una sola acción por paso.
- Etiqueta cada bloque de código con su nombre de archivo o Terminal.
Evitar
- No escondas un paso obligatorio dentro del texto de otro.
- No lo uses para un recorrido que la persona avanza (para eso está Steps).