Passaggi

current è l’indice del passaggio in corso. Tutto ciò che lo precede è completo e riceve una spunta; tutto ciò che segue è ancora da venire. Quello corrente è marcato aria-current="step", quindi viene annunciato oltre che colorato.

Passaggi di base

steps({
  current: 1,
  items: [
    { title: 'Installa' },
    { title: 'Scrivi una pagina' },
    { title: 'Build' },
    { title: 'Pubblica' },
  ],
})

Con descrizioni

steps({
  current: 2,
  items: [
    { title: 'Installa', description: 'npm install -D sitelo' },
    { title: 'Scrivi una pagina', description: 'src/index.ht.js' },
    { title: 'Build', description: 'sitelo build' },
    { title: 'Pubblica', description: 'Pubblica dist/' },
  ],
})

Verticale

Meglio quando le descrizioni sono più lunghe di qualche parola.

steps({
  direction: 'vertical',
  current: 1,
  items: [
    { title: 'Aggiungi il pacchetto', description: 'sitelo porta con sé il proprio Vite, quindi non c’è altro da installare.' },
    { title: 'Scrivi una funzione che restituisce HTML', description: 'Un file sotto src/ è un sito intero.' },
    { title: 'Pubblica l’output', description: 'dist/ è fatta di semplici file statici — qualunque host se li prende.' },
  ],
})

Ancora niente di fatto

steps({ current: 0, items: ['Installa', 'Configura', 'Pubblica'] })

Tutto fatto

Imposta current oltre l’ultimo indice e ogni passaggio si legge come completo.

steps({ current: 3, items: ['Installa', 'Configura', 'Pubblica'] })

Su un telefono

Una riga orizzontale non ha dove andare su uno schermo stretto, quindi sotto i 40rem diventa verticale da sola — nessuna prop necessaria. Restringi questa finestra per vederlo.

Dargli un nome

L’elenco è un <ol>, che porta già con sé l’ordine. Aggiungi label quando la pagina ha più di una serie di passaggi e vanno distinte.

steps({
  label: 'Avanzamento della pubblicazione',
  current: 1,
  items: ['Build', 'Caricamento', 'Invalidazione della cache'],
})

Far avanzare il percorso

Lo stato è fatto di tre nomi di classe e un aria-current, sparsi su ogni passaggio. setStep() li muove insieme, così una procedura guidata che avanza nel browser è una sola chiamata invece di un ciclo.

Un indice oltre l’ultimo passaggio li lascia tutti completi, che è l’aspetto di un percorso finito. Oppure da un attributo di evento, senza nulla nel bundle:

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

Oppure dal tuo modulo, quando ne hai già uno in esecuzione:

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

setStep('checkout', 2)

Props