Langkah

current adalah indeks langkah yang sedang berjalan. Semua sebelumnya sudah selesai dan mendapat tanda centang; semua sesudahnya masih akan datang. Yang sedang berjalan ditandai aria-current="step", jadi ia diumumkan sekaligus diwarnai.

Langkah dasar

steps({
  current: 1,
  items: [
    { title: 'Pasang' },
    { title: 'Tulis sebuah halaman' },
    { title: 'Bangun' },
    { title: 'Terapkan' },
  ],
})

Dengan deskripsi

steps({
  current: 2,
  items: [
    { title: 'Pasang', description: 'npm install -D sitelo' },
    { title: 'Tulis sebuah halaman', description: 'src/index.ht.js' },
    { title: 'Bangun', description: 'sitelo build' },
    { title: 'Terapkan', description: 'Terbitkan dist/' },
  ],
})

Tegak

Lebih baik ketika deskripsinya lebih panjang dari beberapa kata.

steps({
  direction: 'vertical',
  current: 1,
  items: [
    { title: 'Tambahkan paketnya', description: 'sitelo membawa Vite-nya sendiri, jadi tidak ada lagi yang perlu dipasang.' },
    { title: 'Tulis fungsi yang mengembalikan HTML', description: 'Satu berkas di bawah src/ sudah menjadi satu situs utuh.' },
    { title: 'Terbitkan keluarannya', description: 'dist/ adalah berkas statis biasa — hosting mana pun menerimanya.' },
  ],
})

Belum ada yang selesai

steps({ current: 0, items: ['Pasang', 'Konfigurasi', 'Terapkan'] })

Semuanya selesai

Setel current melewati indeks terakhirnya dan setiap langkah terbaca sebagai selesai.

steps({ current: 3, items: ['Pasang', 'Konfigurasi', 'Terapkan'] })

Di ponsel

Baris mendatar tidak punya tempat untuk pergi di layar sempit, jadi ia berubah tegak sendiri di bawah 40rem — tanpa props apa pun. Sempitkan jendela ini untuk melihatnya.

Memberinya label

Daftarnya adalah sebuah <ol>, yang sudah membawa urutannya. Tambahkan label ketika halamannya punya lebih dari satu rangkaian langkah dan keduanya perlu dibedakan.

steps({
  label: 'Kemajuan penerapan',
  current: 1,
  items: ['Bangun', 'Unggah', 'Batalkan singgahan'],
})

Memajukan alurnya

Keadaannya adalah tiga nama kelas dan satu aria-current, tersebar di setiap langkah. setStep() memindahkan semuanya bersamaan, jadi wisaya yang maju di peramban cukup satu panggilan alih-alih sebuah perulangan.

Indeks yang melewati langkah terakhir membuat semuanya selesai, dan begitulah rupa alur yang tuntas. Atau dari sebuah atribut peristiwa, tanpa apa pun dibundel:

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

Atau dari modul Anda sendiri, ketika sudah ada yang berjalan:

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

setStep('checkout', 2)

Props