Шаги

current — индекс текущего шага. Всё, что до него, завершено и получает галочку; всё, что после, ещё впереди. Текущий помечается aria-current="step", поэтому он не только окрашен, но и объявляется.

Простые шаги

steps({
  current: 1,
  items: [
    { title: 'Установить' },
    { title: 'Написать страницу' },
    { title: 'Собрать' },
    { title: 'Развернуть' },
  ],
})

С описаниями

steps({
  current: 2,
  items: [
    { title: 'Установить', description: 'npm install -D sitelo' },
    { title: 'Написать страницу', description: 'src/index.ht.js' },
    { title: 'Собрать', description: 'sitelo build' },
    { title: 'Развернуть', description: 'Опубликовать dist/' },
  ],
})

Вертикально

Лучше, когда описания длиннее пары слов.

steps({
  direction: 'vertical',
  current: 1,
  items: [
    { title: 'Добавьте пакет', description: 'sitelo приносит собственный Vite, так что ставить больше нечего.' },
    { title: 'Напишите функцию, возвращающую HTML', description: 'Один файл в src/ — это уже целый сайт.' },
    { title: 'Опубликуйте результат', description: 'dist/ — это обычные статические файлы, их примет любой хостинг.' },
  ],
})

Пока ничего не сделано

steps({ current: 0, items: ['Установить', 'Настроить', 'Развернуть'] })

Всё сделано

Поставьте current за последний индекс — и все шаги читаются как завершённые.

steps({ current: 3, items: ['Установить', 'Настроить', 'Развернуть'] })

На телефоне

Горизонтальному ряду на узком экране деваться некуда, поэтому ниже 40rem он сам становится вертикальным — никаких пропсов не нужно. Сузьте это окно, чтобы увидеть.

Подпись для списка

Список — это <ol>, порядок в нём уже заложен. Добавляйте label, когда на странице больше одного набора шагов и их нужно различать.

steps({
  label: 'Ход развёртывания',
  current: 1,
  items: ['Сборка', 'Загрузка', 'Сброс кэша'],
})

Продвигать поток

Состояние — это три имени класса и один aria-current, разбросанные по всем шагам. setStep() двигает их вместе, так что мастер, который идёт вперёд в браузере, — это один вызов, а не цикл.

Индекс за последним шагом оставляет завершёнными все — так и выглядит законченный поток. Или прямо из атрибута события, без единого байта в бандле:

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

Или из вашего собственного модуля, если он и так уже работает:

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

setStep('checkout', 2)

Пропсы