Components · Stepper

Stepper

Sıralı, sırası bozulamayan akışlar için yol haritası. Onboarding, çok-adımlı form, sipariş yaşam döngüsü. Wizard'dan farkı: stepper her adımda nerede olduğunu gösterir; navigasyon kontrolü ayrıdır. Yatay (≤5 adım) ya da dikey (uzun açıklamalı, ≤8 adım).

01 · Yatay · onboarding 4 adım

1
İşletme
Tamamlandı
2
Menü
12 ürün
3
Ödeme
Şu adımda
4
Yayına al
Sonraki

02 · Hata durumu · 5 adımlı checkout

1
Sepet
2
Adres
!
Ödeme
Kart reddedildi
4
Onay
5
Tamam

03 · Dikey · sipariş yaşam döngüsü

Müşteri tarafı: timeline-benzeri, zaman damgalı
1
Sipariş alındı
Mehmet, siparişin sisteme düştü. Mutfak hazırlığa başladı.
14:32 · 2 dk önce
2
Hazırlanıyor
Köfte ızgaraya bırakıldı. Tahmini bitiş 15-18 dk.
14:34
3
Hazır · kuryeyi bekliyor
Sipariş paketlendi. En yakın kurye 4 dk uzaklıkta.
4
Yolda
Kurye atanınca canlı konum başlar.
5
Teslim edildi
Tahmini 14:55–15:00
1
İşletme bilgileri
Vergi no, IBAN ve şube adresleri eklendi.
2
Menü ve fiyatlar
12 ürün, 4 kategori. Görseller AI ile zenginleştirildi.
3
Ödeme entegrasyonu
iyzico hesabını bağla; kapıda nakit varsayılan açık.
4
Yayına al
WhatsApp linkin oluşturulur, müşteriler erişebilir.

Kurallar

· 24×24 dot, 1.5px border, font 11px tabular. Aktif ring 4px --nb-primary-50.
· Bağlantı çizgisi 2px; tamamlanan adımlar arası primary, sonrasında border-strong. Asla kesik çizgi (bağ kuvvetli olmalı).
· Adım sırası kesin — kullanıcı geçemez. Geriye gitmek düzeltme içindir, ileri "Devam"-buton ile.
· Yatay max 5 adım; üstüne çıkıyorsa dikey'e geç ya da meta-step (gruplama) yap.
· Hata adımı: dot kırmızı, ünlem ikonu, "neden başarısız?" alt-metni şart. Step atlatmaz; düzeltilmesi gerekir.
· Sipariş yaşam döngüsünde dikey stepper saat damgalı timeline'a yaklaşır — gelecek adımlar tahmini saat ile.
· Erişilebilirlik: role="list" + her step aria-current="step"; tamamlanan aria-disabled; ekran okuyucu sırasıyla okur.
· Yasak: stepper içinde clickable nav (kullanıcı sırayı bozar), step başlığında 3+ kelime, dot içinde ikon abartısı.