Passos

current é o índice do passo em curso. Tudo o que vem antes está completo e leva um visto; tudo o que vem depois ainda está para vir. O atual leva aria-current="step", por isso além de colorido também é anunciado.

Passos básicos

steps({
  current: 1,
  items: [
    { title: 'Instalar' },
    { title: 'Escrever uma página' },
    { title: 'Construir' },
    { title: 'Publicar' },
  ],
})

Com descrições

steps({
  current: 2,
  items: [
    { title: 'Instalar', description: 'npm install -D sitelo' },
    { title: 'Escrever uma página', description: 'src/index.ht.js' },
    { title: 'Construir', description: 'sitelo build' },
    { title: 'Publicar', description: 'Publicar dist/' },
  ],
})

Vertical

Melhor quando as descrições passam de umas quantas palavras.

steps({
  direction: 'vertical',
  current: 1,
  items: [
    { title: 'Adicionar o pacote', description: 'O sitelo traz o seu próprio Vite, por isso não há mais nada para instalar.' },
    { title: 'Escrever uma função que devolva HTML', description: 'Um ficheiro em src/ já é um site inteiro.' },
    { title: 'Publicar o resultado', description: 'dist/ são ficheiros estáticos simples — qualquer alojamento os aceita.' },
  ],
})

Ainda nada feito

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

Tudo feito

Põe o current para lá do último índice e todos os passos se leem como completos.

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

Num telemóvel

Uma fila horizontal não tem para onde ir num ecrã estreito, por isso abaixo de 40rem passa a vertical sozinha — sem prop nenhuma. Estreita esta janela para ver.

Dar-lhe nome

A lista é um <ol>, que já carrega a ordem. Acrescenta label quando a página tiver mais do que um conjunto de passos e for preciso distingui-los.

steps({
  label: 'Progresso da publicação',
  current: 1,
  items: ['Construir', 'Carregar', 'Invalidar a cache'],
})

Avançar o fluxo

O estado são três nomes de classe e um aria-current, espalhados por todos os passos. setStep() move-os em conjunto, por isso um assistente que avança no browser é uma chamada e não um ciclo.

Um índice para lá do último passo deixa-os todos completos, que é o aspeto de um fluxo terminado. Ou a partir de um atributo de evento, sem nada no bundle:

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

Ou a partir do teu próprio módulo, quando já houver um a correr:

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

setStep('checkout', 2)

Props