LivaStepper
Çok adımlı süreçleri (sihirbaz, onay akışı, sipariş takibi) görselleştiren adım
göstergesi. Adımlar items dizisiyle tanımlanır; yatay ve dikey yönelim,
üç farklı boyut, opsiyonel ve devre dışı adımlar desteklenir.
import { LivaStepper } from "@dataliva/livalib";
Yatay Kullanım ve Etkileşim
Aktif adım selectedIndex ile kontrol edilir. Kullanıcı bir adıma
tıkladığında onSelectionChanged tetiklenir; butonlarla da state üzerinden
ileri/geri gidilebilir.
Yatay stepper — butonlarla ilerletme
Önizleme yükleniyor…
Dikey Yönelim
orientation="vertical" adımları alt alta dizer. optional: true adımı
isteğe bağlı olarak işaretler, disabled: true adımı tıklanamaz yapar,
icon ise DevExtreme simge adlarını kabul eder.
Dikey yönelim — opsiyonel ve devre dışı adımlar
Önizleme yükleniyor…
Boyutlar
Boyutlar
Önizleme yükleniyor…
| Prop | Tip | Varsayılan |
|---|---|---|
items | LivaStepperItem[] | — (zorunlu) |
selectedIndex | number | — |
onSelectionChanged | (e) => void | — |
onSelectionChanging | (e) => void | — |
orientation | 'horizontal' | 'vertical' | 'horizontal' |
itemRender | (item: LivaStepperItem) => React.ReactNode | — |
size | 'small' | 'medium' | 'large' | 'medium' |
variant | 'standard' | 'standard' |
disabled | boolean | false |
className | string | '' |
LivaStepperItem
| Alan | Tip | Varsayılan |
|---|---|---|
label | string | — |
icon | string | — |
optional | boolean | false |
disabled | boolean | false |
render | (data: LivaStepperItem) => React.ReactElement | — |