Adımlar

current sürmekte olan adımın dizinidir. Ondan önceki her şey tamamlanmıştır ve bir onay işareti alır; sonraki her şey henüz gelecektir. Geçerli olan aria-current="step" ile işaretlenir, böylece renklendiği gibi duyurulur da.

Temel adımlar

steps({
  current: 1,
  items: [
    { title: 'Kurulum' },
    { title: 'Bir sayfa yazın' },
    { title: 'Derleyin' },
    { title: 'Dağıtın' },
  ],
})

Açıklamalarla

steps({
  current: 2,
  items: [
    { title: 'Kurulum', description: 'npm install -D sitelo' },
    { title: 'Bir sayfa yazın', description: 'src/index.ht.js' },
    { title: 'Derleyin', description: 'sitelo build' },
    { title: 'Dağıtın', description: 'dist/ dizinini yayımlayın' },
  ],
})

Dikey

Açıklamalar birkaç sözcükten uzunsa daha iyidir.

steps({
  direction: 'vertical',
  current: 1,
  items: [
    { title: 'Paketi ekleyin', description: 'sitelo kendi Vite’ını getirir, bu yüzden kurulacak başka bir şey yoktur.' },
    { title: 'HTML döndüren bir fonksiyon yazın', description: 'src/ altındaki tek bir dosya bütün bir sitedir.' },
    { title: 'Çıktıyı yayımlayın', description: 'dist/ düz statik dosyalardır — her sunucu onları kabul eder.' },
  ],
})

Henüz hiçbir şey bitmedi

steps({ current: 0, items: ['Kurulum', 'Yapılandırma', 'Dağıtım'] })

Hepsi bitti

current değerini son dizinin ötesine ayarlayın, her adım tamamlanmış okunsun.

steps({ current: 3, items: ['Kurulum', 'Yapılandırma', 'Dağıtım'] })

Telefonda

Yatay bir sıranın dar bir ekranda gidecek yeri yoktur, bu yüzden 40rem altında kendiliğinden dikeye döner — prop gerekmez. Görmek için bu pencereyi daraltın.

Etiketlemek

Liste bir <ol> öğesidir, sırayı zaten taşır. Sayfada birden çok adım kümesi varsa ve ayırt edilmeleri gerekiyorsa label ekleyin.

steps({
  label: 'Dağıtım ilerlemesi',
  current: 1,
  items: ['Derle', 'Yükle', 'Önbelleği geçersiz kıl'],
})

Akışı ilerletmek

Durum, her adıma yayılmış üç sınıf adı ve bir aria-current değeridir. setStep() onları birlikte hareket ettirir, böylece tarayıcıda ilerleyen bir sihirbaz bir döngü değil tek bir çağrıdır.

Son adımın ötesindeki bir dizin hepsini tamamlanmış bırakır, ki bitmiş bir akış da böyle görünür. Ya da hiçbir şey paketlenmeden, bir olay özniteliğinden:

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

Ya da zaten çalışan bir modülünüz varsa kendi modülünüzden:

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

setStep('checkout', 2)

Proplar