Todos los componentes (204)

Pasos

Navegación · Steps · .amset-steps

Qué es y cuándo usarlo

Las fases de un proceso que va hacia delante: la compra (carrito, envío, pago, confirmación), el alta de un cliente o por dónde va un pedido. Cada paso dice su estado con una palabra («Hecho», «En curso», «Pendiente», «Con error»), además del color y la marca.

Cuándo usarlo

Para enseñar cuántos pasos hay y en cuál se está. Con current (el índice del paso en curso, desde 0) basta: lo anterior sale hecho y lo siguiente pendiente. Un state en un paso (done, in-progress, pending o error) manda sobre esa cuenta (un pago rechazado).
Con onPress cada paso es un botón, para volver a una fase ya hecha de un formulario.
orientation="vertical" en una columna estrecha o con descripciones largas; statusText si el proceso no son «pasos» (un envío que «Llegó»). numbered={false} quita los números de los círculos.
size sm, md o lg como el resto de la biblioteca: lg cuando los pasos son lo principal de la pantalla (la compra), sm dentro de una tarjeta.

Cuándo no

Para lo que ya ha pasado, con fecha y autor: History.
Para un formulario por pasos entero, con su validación y sus botones: Wizard, que ya lleva estos pasos dentro.
En móvil, donde no caben cuatro columnas de texto: CurrentStep («Paso 3 de 4»).

Teclado: sin onPress no hay nada que pulsar y no coge el foco. Con onPress, Tab recorre los pasos e Intro o Espacio los pulsan; un paso con disabled ni coge el foco ni responde.

Accesibilidad: es una lista ordenada (ol) con nombre (label), así que se oye cuántos pasos hay. El paso en curso lleva aria-current="step" y el estado de cada uno va escrito: en blanco y negro, o sin distinguir el verde del rojo, un círculo de color no dice nada. Los números (escritos en el idioma) y las marcas son decorativos. Sin pasos no pinta nada: una lista vacía solo sirve para que el lector diga «0 elementos».

Contexto: va dentro de LocaleProvider (o de AmsetProvider), que decide cómo se escriben los números de los pasos.

Aspecto fino: --amset-steps-brand es el lado del círculo (1,75 rem; 1,375 en sm y 2,25 en lg), y de él salen las líneas que unen los pasos, que así pasan siempre por su centro. El resto, con las clases amset-steps, amset-steps__brand, amset-steps__title y amset-steps__state.

Cómo se ve

En reparto

El repartidor lo lleva hoy: llega mañana antes de las 14:00.

<Steps
  label="Seguimiento del pedido 1042"
  current={paso}
  steps={[
    { key: 'recibido', title: 'Recibido', description: '12 oct' },
    { key: 'preparado', title: 'Preparado', description: '13 oct' },
    { key: 'reparto', title: 'En reparto', description: 'Llega manana' },
    { key: 'entregado', title: 'Entregado' },
  ]}
  onPress={(clave, indice) => setPaso(indice)}
/>
<Alert tone="warning" title="En reparto">
  El repartidor lo lleva hoy: llega manana antes de las 14:00.
</Alert>

Props

Se importa con import { Steps } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`label`obligatoria	`string`	De que proceso son estos pasos. Obligatorio: es el nombre de la lista.
`steps`obligatoria	`readonly Step[]`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`current`	`number`	Indice del paso en curso (el primero es 0).
`numbered`	`boolean`	Numera los pasos en vez de dejar solo el punto.
`onPress`	`(key: string, index: number) => void`	Hace pulsable cada paso: para volver atras en un formulario por fases.
`orientation`	`"horizontal" \| "vertical"`	—
`size`	`"sm" \| "md" \| "lg"`	Tamaño de las marcas y del texto: `sm`, `md` (por defecto) o `lg`.
`statusText`	`Readonly<Record<StepStatus, string>>`	Texto propio para cada estado (por si el proceso no son "pasos").

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-steps-brand`	`1.75rem`
`--amset-steps-brand-font`	`var(--amset-text-sm)`
`--amset-steps-icon`	`0.875rem`
`--amset-steps-gap`	`var(--amset-space-2)`
`--amset-steps-title`	`var(--amset-text-base)`
`--amset-steps-description`	`var(--amset-text-sm)`
`--amset-steps-state`	`var(--amset-text-xs)`

Cómo se cambia

.amset-steps {
  --amset-steps-brand: ...;
  --amset-steps-brand-font: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: