Todos los componentes (204)

Lista de puesta en marcha

Gestión · OnboardingList · .amset-start

Qué es y cuándo usarlo

La lista de puesta en marcha: lo que falta para tener la cuenta lista. El progreso va en una barra y escrito («2 de 5 hechos»), porque una barra sola no dice cuánto queda.

Cuándo usarlo

Los primeros días de una cuenta nueva: crear la tienda, rellenar los datos fiscales, subir el primer producto, conectar el cobro.
Cada paso con su action (un botón o un enlace para hacerlo): solo la enseña el siguiente pendiente.
optional para lo que se puede dejar para luego: no impide dar la puesta en marcha por terminada.

Cuándo no

Un formulario partido en pasos que se rellenan seguidos: Wizard.
El avance de algo que no depende de quien mira (un pedido en camino): OrderStatus.

Teclado: no tiene teclado propio. Lo único interactivo es la acción del siguiente paso, con su parada del Tab.

Accesibilidad: es una región con el nombre de label, y los pasos, una lista ordenada. La barra se llama con el título (o con label, si no hay title) y el recuento («Prepara tu tienda: 2 de 5 hechos»), una sola vez. Lo hecho lleva su marca y la palabra «Hecho» oculta a la vista: un tic verde no se lee ni se distingue sin ver el color. El siguiente pendiente se destaca y es el único que enseña su botón, porque cinco llamadas a la acción a la vez no guían a nadie. Con todo lo obligatorio hecho, el recuento pasa a «Todo listo» y sale el texto de completed.

Aspecto fino: variables CSS --amset-start-*: -brand, -brand-font, -brand-icon, -detail, -gap, -name, -radius, -step-gap, -step-padding, -title. El tamaño mueve el relleno del paso, el círculo con su número y los cuerpos de letra.

Cómo se ve

Hecho: Crear la cuenta
Hecho: Subir el logotipo
Invitar al equipoHasta cinco personas

<OnboardingList
  label="Primeros pasos"
  steps={[
    { key: 'cuenta', title: 'Crear la cuenta', done: true },
    { key: 'equipo', title: 'Invitar al equipo', done: false },
  ]}
/>

Props

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

Prop	Tipo	Para qué sirve
`label`obligatoria	`string`	De que es la lista. Obligatoria: nombra la region.
`steps`obligatoria	`readonly OnboardingStep[]`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`completed`	`string`	Texto cuando ya esta todo hecho.
`size`	`"sm" \| "md" \| "lg"`	—
`title`	`string`	Titulo a la vista. Sin el, solo se ve el recuento.

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-start-gap`	`var(--amset-space-4)`
`--amset-start-title`	`var(--amset-text-lg)`
`--amset-start-step-padding`	`var(--amset-space-3)`
`--amset-start-step-gap`	`var(--amset-space-3)`
`--amset-start-radius`	`var(--amset-radius)`
`--amset-start-brand`	`1.25rem`
`--amset-start-brand-icon`	`0.875rem`
`--amset-start-brand-font`	`var(--amset-text-xs)`
`--amset-start-name`	`var(--amset-text-base)`
`--amset-start-detail`	`var(--amset-text-sm)`

Cómo se cambia

.amset-start {
  --amset-start-gap: ...;
  --amset-start-title: ...;
}

En el banco de pruebas

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