Todos los componentes (204)

Asistente por pasos

Navegación · Wizard · .amset-wizard

Qué es y cuándo usarlo

Un formulario largo partido en pasos (la compra, el alta de un cliente, la configuración inicial): la fila de Steps arriba, el paso actual en su panel y los botones de anterior y siguiente abajo.

Cuándo usarlo

Cuando el formulario no cabe en una pantalla y se entiende mejor por partes que tienen sentido solas.
onExit en cada paso para validarlo: si devuelve false (o una promesa que acaba en false) no se avanza. Mientras espera, el botón se queda en marcha y no admite dobles envíos.
onFinish para lo que pasa al salir del último paso: ahí el botón dice finishText («Terminar»).
Si onExit o onFinish fallan (lanzan o su promesa se rechaza), el paso no avanza, sale errorText junto a los botones y el error va a onError con la clave del paso (sin onError, a la consola, con el proceso y el paso).
headingLevel según dónde vaya: el título de cada paso es un h3 por defecto; debajo de un h1 a secas, 2.
index y onStepChange para llevar el paso desde fuera; previousText y nextText cambian el texto de los botones.

Cuándo no

Para un formulario corto: uno solo, sin pasos, se rellena antes.
Para enseñar por dónde va algo sin rellenar nada (un pedido, un envío): Steps.
Para apartados que se pueden rellenar en cualquier orden: Tabs o Accordion.

Teclado: Tab recorre la fila de pasos, el contenido del paso y los botones. Al cambiar de paso el foco va al panel del paso nuevo: el siguiente Tab entra en sus campos. En la fila solo se puede pulsar lo ya visitado; lo de más adelante está deshabilitado.

Accesibilidad: es una sección con nombre (label); la fila es una lista con el paso en curso marcado, llamada «Pasos: » y el label tal cual (o lo que diga stepsLabel), y el panel es un grupo nombrado por el título del paso, que es un encabezado del nivel que diga headingLevel. El cambio se anuncia («Paso 2 de 3: Dirección de envío», con los números en el idioma) en un role="status". Mientras se valida, el botón dice «Comprobando». Un fallo se dice en un role="alert", que se anuncia al momento, y el foco se queda en el botón para volver a intentarlo.

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

Aspecto fino: variables CSS --amset-wizard-*: -gap. El tamaño mueve el hueco entre los pasos, el contenido y los botones.

Cómo se ve

Datos

Nombre, correo y telefono.

<Wizard
  label="Alta de cliente"
  steps={[
    { key: 'datos', title: 'Datos', content: <Datos /> },
    { key: 'pago', title: 'Pago', content: <Pago /> },
  ]}
/>

Props

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

Prop	Tipo	Para qué sirve
`label`obligatoria	`string`	Nombre del proceso entero: «Finalizar compra», «Alta de cliente».
`steps`obligatoria	`readonly WizardStep[]`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`errorText`	`string`	Lo que se dice si no se ha podido avanzar o terminar.
`finishText`	`string`	—
`headingLevel`	`WizardHeadingLevel`	Nivel del titulo de cada paso, para no romper los encabezados de la pagina. Por defecto, 3.
`index`	`number`	—
`nextText`	`string`	—
`onError`	`(error: unknown, key: string) => void`	Lo que se hace con el error si `onExit` o `onFinish` fallan, ademas de decirlo en pantalla: mandarlo al registro de la aplicacion. Recibe el error y la clave del paso. Sin esto va a la consola, con el paso y el proceso.
`onFinish`	`() => void \| Promise<void>`	Se llama al terminar el ultimo paso.
`onStepChange`	`(index: number) => void`	—
`previousText`	`string`	—
`size`	`"sm" \| "md" \| "lg"`	El hueco entre los pasos, el contenido y los botones.
`stepsLabel`	`string`	Nombre de la fila de pasos. Por defecto, «Pasos: » y la `label` tal cual.

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-wizard-gap`	`var(--amset-space-5)`

Cómo se cambia

.amset-wizard {
  --amset-wizard-gap: ...;
}

En el banco de pruebas

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