Pasos

current es el índice del paso en curso. Todo lo anterior está completo y recibe una marca; todo lo posterior está por llegar. El actual se marca con aria-current="step", así que además de colorearse se anuncia.

Pasos básicos

steps({
  current: 1,
  items: [
    { title: 'Instalar' },
    { title: 'Escribir una página' },
    { title: 'Compilar' },
    { title: 'Desplegar' },
  ],
})

Con descripciones

steps({
  current: 2,
  items: [
    { title: 'Instalar', description: 'npm install -D sitelo' },
    { title: 'Escribir una página', description: 'src/index.ht.js' },
    { title: 'Compilar', description: 'sitelo build' },
    { title: 'Desplegar', description: 'Publica dist/' },
  ],
})

Vertical

Mejor cuando las descripciones pasan de unas pocas palabras.

steps({
  direction: 'vertical',
  current: 1,
  items: [
    { title: 'Añade el paquete', description: 'sitelo trae su propio Vite, así que no hay nada más que instalar.' },
    { title: 'Escribe una función que devuelva HTML', description: 'Un archivo en src/ ya es un sitio entero.' },
    { title: 'Publica la salida', description: 'dist/ son archivos estáticos a secas: cualquier hosting los acepta.' },
  ],
})

Nada hecho todavía

steps({ current: 0, items: ['Instalar', 'Configurar', 'Desplegar'] })

Todo hecho

Pon current más allá del último índice y todos los pasos se leen como completos.

steps({ current: 3, items: ['Instalar', 'Configurar', 'Desplegar'] })

En el móvil

Una fila horizontal no tiene adónde ir en una pantalla estrecha, así que por debajo de 40rem se vuelve vertical por su cuenta, sin ninguna prop. Estrecha esta ventana para verlo.

Ponerle etiqueta

La lista es un <ol>, que ya lleva el orden. Añade label cuando la página tenga más de un conjunto de pasos y haya que distinguirlos.

steps({
  label: 'Progreso del despliegue',
  current: 1,
  items: ['Compilar', 'Subir', 'Invalidar la caché'],
})

Avanzar el flujo

El estado son tres nombres de clase y un aria-current, repartidos por todos los pasos. setStep() los mueve a la vez, así que un asistente que avanza en el navegador es una llamada y no un bucle.

Un índice más allá del último paso deja todos completos, que es como se ve un flujo terminado. O desde un atributo de evento, sin nada en el bundle:

button({ onclick: "import('/su/steps.js').then(m=>m.set('checkout',2))" }, 'Next')

O desde tu propio módulo, cuando ya haya uno en marcha:

import { setStep } from 'sitelo/ui/client'

setStep('checkout', 2)

Props