Kroki

current to indeks kroku w toku. Wszystko przed nim jest ukończone i dostaje ptaszka; wszystko po nim dopiero nadchodzi. Bieżący ma aria-current="step", więc jest nie tylko pokolorowany, ale i zapowiadany.

Podstawowe kroki

steps({
  current: 1,
  items: [
    { title: 'Instalacja' },
    { title: 'Napisz stronę' },
    { title: 'Build' },
    { title: 'Wdrożenie' },
  ],
})

Z opisami

steps({
  current: 2,
  items: [
    { title: 'Instalacja', description: 'npm install -D sitelo' },
    { title: 'Napisz stronę', description: 'src/index.ht.js' },
    { title: 'Build', description: 'sitelo build' },
    { title: 'Wdrożenie', description: 'Opublikuj dist/' },
  ],
})

Pionowo

Lepsze, gdy opisy są dłuższe niż kilka słów.

steps({
  direction: 'vertical',
  current: 1,
  items: [
    { title: 'Dodaj pakiet', description: 'sitelo przynosi własne Vite, więc nie ma nic więcej do instalowania.' },
    { title: 'Napisz funkcję zwracającą HTML', description: 'Jeden plik pod src/ to cała witryna.' },
    { title: 'Opublikuj wynik', description: 'dist/ to zwykłe pliki statyczne — weźmie je każdy hosting.' },
  ],
})

Nic jeszcze nie zrobione

steps({ current: 0, items: ['Instalacja', 'Konfiguracja', 'Wdrożenie'] })

Wszystko gotowe

Ustaw current poza ostatni indeks, a każdy krok czyta się jako ukończony.

steps({ current: 3, items: ['Instalacja', 'Konfiguracja', 'Wdrożenie'] })

Na telefonie

Poziomy rząd nie ma gdzie się podziać na wąskim ekranie, więc poniżej 40rem sam staje się pionowy — bez żadnego propsa. Zwęź to okno, żeby zobaczyć.

Nazwanie

Lista jest elementem <ol>, który niesie już kolejność. Dodaj label, gdy strona ma więcej niż jeden zestaw kroków i trzeba je rozróżnić.

steps({
  label: 'Postęp wdrożenia',
  current: 1,
  items: ['Build', 'Wysyłka', 'Unieważnienie cache'],
})

Posuwanie przebiegu

Stan to trzy nazwy klas i jedno aria-current, rozsiane po wszystkich krokach. setStep() rusza je razem, więc kreator posuwający się w przeglądarce to jedno wywołanie, a nie pętla.

Indeks poza ostatnim krokiem zostawia wszystkie ukończone, a tak właśnie wygląda zakończony przebieg. Albo z atrybutu zdarzenia, bez niczego w paczce:

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

Albo z własnego modułu, gdy już jakiś działa:

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

setStep('checkout', 2)

Propsy