Todos los componentes (204)

Paso actual

Navegación · CurrentStep

Qué es y cuándo usarlo

«Paso 2 de 4» y el nombre del paso: la versión corta de Steps para pantallas estrechas, donde no caben cuatro columnas de texto.

Cuándo usarlo

En móvil, encima de un formulario por fases o de la compra, en lugar de la fila de pasos.
Junto a Steps, con los mismos steps, cuando la fila de pasos se esconde en pantallas pequeñas. current es el índice del paso en curso (el primero es 0) y size el cuerpo de letra.

Cuándo no

Si caben los pasos: Steps enseña además qué está hecho y qué falta.
Para un formulario por pasos completo: Wizard, que ya lo cuenta y lo anuncia.

Teclado: no tiene; es solo texto.

Accesibilidad: va en un role="status", así que al avanzar se anuncia el paso nuevo sin mover el foco. Un current fuera de rango se acota al primer o al último paso en vez de decir «Paso 7 de 4», y sin pasos no pinta nada en vez de «Paso 0 de 0». Los números se escriben con el idioma.

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

Aspecto fino: sin variables propias: se ajusta con las clases amset-steps__summary, amset-steps__summary-number y amset-steps__summary-title.

Cómo se ve

Paso 2 de 4Envío

<CurrentStep
  steps={[
    { key: 'carrito', title: 'Carrito' },
    { key: 'envio', title: 'Envio' },
    { key: 'pago', title: 'Pago' },
    { key: 'confirmacion', title: 'Confirmacion' },
  ]}
  current={paso}
/>

Props

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

Prop	Tipo	Para qué sirve
`current`obligatoria	`number`	—
`steps`obligatoria	`readonly Step[]`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`size`	`"sm" \| "md" \| "lg"`	El cuerpo de letra del resumen.

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

En el banco de pruebas

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