Schritte

current ist der Index des Schritts, der gerade läuft. Alles davor ist abgeschlossen und bekommt ein Häkchen; alles danach steht noch aus. Der aktuelle trägt aria-current="step" und wird damit nicht nur eingefärbt, sondern auch angesagt.

Einfache Schritte

steps({
  current: 1,
  items: [
    { title: 'Installieren' },
    { title: 'Eine Seite schreiben' },
    { title: 'Bauen' },
    { title: 'Deployen' },
  ],
})

Mit Beschreibungen

steps({
  current: 2,
  items: [
    { title: 'Installieren', description: 'npm install -D sitelo' },
    { title: 'Eine Seite schreiben', description: 'src/index.ht.js' },
    { title: 'Bauen', description: 'sitelo build' },
    { title: 'Deployen', description: 'dist/ veröffentlichen' },
  ],
})

Vertikal

Besser, wenn die Beschreibungen länger als ein paar Wörter sind.

steps({
  direction: 'vertical',
  current: 1,
  items: [
    { title: 'Das Paket hinzufügen', description: 'sitelo bringt sein eigenes Vite mit, es gibt also nichts weiter zu installieren.' },
    { title: 'Eine Funktion schreiben, die HTML zurückgibt', description: 'Eine Datei unter src/ ist bereits eine ganze Website.' },
    { title: 'Die Ausgabe veröffentlichen', description: 'dist/ sind schlichte statische Dateien — jeder Host nimmt sie.' },
  ],
})

Noch nichts erledigt

steps({ current: 0, items: ['Installieren', 'Konfigurieren', 'Deployen'] })

Alles erledigt

Setze current hinter den letzten Index, und jeder Schritt liest sich als abgeschlossen.

steps({ current: 3, items: ['Installieren', 'Konfigurieren', 'Deployen'] })

Am Telefon

Eine waagerechte Reihe hat auf schmalem Bildschirm keinen Platz, deshalb wird sie unterhalb von 40rem von selbst senkrecht — ohne Prop. Mach dieses Fenster schmaler, um es zu sehen.

Sie beschriften

Die Liste ist ein <ol>, das die Reihenfolge bereits trägt. Ergänze label, wenn eine Seite mehr als eine Schrittfolge hat und sie auseinandergehalten werden müssen.

steps({
  label: 'Fortschritt des Deployments',
  current: 1,
  items: ['Bauen', 'Hochladen', 'Cache invalidieren'],
})

Den Ablauf weiterschalten

Der Zustand sind drei Klassennamen und ein aria-current, verteilt über alle Schritte. setStep() bewegt sie zusammen — ein Assistent, der im Browser weiterschaltet, ist ein Aufruf statt einer Schleife.

Ein Index hinter dem letzten Schritt lässt alle abgeschlossen zurück — so sieht ein fertiger Ablauf aus. Oder aus einem Event-Attribut heraus, ohne irgendetwas zu bündeln:

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

Oder aus deinem eigenen Modul, wenn ohnehin schon eines läuft:

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

setStep('checkout', 2)

Props