Étapes

current est l’indice de l’étape en cours. Tout ce qui précède est terminé et reçoit une coche ; tout ce qui suit reste à venir. L’étape courante porte aria-current="step" : elle est donc annoncée en plus d’être colorée.

Étapes de base

steps({
  current: 1,
  items: [
    { title: 'Installer' },
    { title: 'Écrire une page' },
    { title: 'Construire' },
    { title: 'Déployer' },
  ],
})

Avec des descriptions

steps({
  current: 2,
  items: [
    { title: 'Installer', description: 'npm install -D sitelo' },
    { title: 'Écrire une page', description: 'src/index.ht.js' },
    { title: 'Construire', description: 'sitelo build' },
    { title: 'Déployer', description: 'Publier dist/' },
  ],
})

Vertical

Préférable quand les descriptions dépassent quelques mots.

steps({
  direction: 'vertical',
  current: 1,
  items: [
    { title: 'Ajouter le paquet', description: 'sitelo apporte son propre Vite, il n’y a donc rien d’autre à installer.' },
    { title: 'Écrire une fonction qui renvoie du HTML', description: 'Un seul fichier sous src/ fait déjà un site.' },
    { title: 'Publier la sortie', description: 'dist/ n’est que des fichiers statiques — n’importe quel hébergeur les prend.' },
  ],
})

Rien de fait pour l’instant

steps({ current: 0, items: ['Installer', 'Configurer', 'Déployer'] })

Tout est fait

Mettez current au-delà du dernier indice et chaque étape se lit comme terminée.

steps({ current: 3, items: ['Installer', 'Configurer', 'Déployer'] })

Sur un téléphone

Une rangée horizontale n’a nulle part où aller sur un écran étroit : sous 40rem elle devient verticale d’elle-même, sans aucune prop. Rétrécissez cette fenêtre pour le voir.

Lui donner un nom

La liste est un <ol>, qui porte déjà l’ordre. Ajoutez label quand la page contient plusieurs séries d’étapes qu’il faut distinguer.

steps({
  label: 'Progression du déploiement',
  current: 1,
  items: ['Construire', 'Téléverser', 'Invalider le cache'],
})

Faire avancer le parcours

L’état, ce sont trois noms de classe et un aria-current, répartis sur toutes les étapes. setStep() les déplace ensemble : un assistant qui avance dans le navigateur tient en un appel, pas en une boucle.

Un index au-delà de la dernière étape les laisse toutes terminées — c’est à quoi ressemble un parcours achevé. Ou depuis un attribut d’événement, sans rien dans le bundle :

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

Ou depuis votre propre module, quand il y en a déjà un qui tourne :

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

setStep('checkout', 2)

Props