Stepper

Kurulum

Paket

@bigbang/ui

İçe aktarma

import { Stepper } from '@bigbang/ui';

Kaynak

Stepper.tsx

Storybook

Stepper · Playground

Stepper ve WizardFooter, @bigbang/ui paketindedir.

import { Stepper, WizardFooter } from '@bigbang/ui';

<Stepper steps={steps} current={step} onStepChange={setStep} />
<WizardFooter step={step} total={steps.length} onBack={back} onNext={next} loading={saving} />;

Özellikler

Stepper

stepsZorunlu

Açıklama

Sırayla adımlar.

Tür

readonly StepperStep[]

currentZorunlu

Açıklama

Geçerli adımın sırası, 0'dan. Öncekiler tamamlanmıştır.

Tür

number

orientation

Açıklama

Düzen: bir satır ya da her işaretin yanında açıklamalı bir sütun.

Tür

'horizontal' | 'vertical'

Varsayılan

'horizontal'

onStepChange

Açıklama

Kullanıcı tamamlanmış ya da dikkat gerektiren bir adımı seçince sırasıyla çağrılır. Verilmezse adımlar düğme olmaz.

Tür

(index: number) => void

label

Açıklama

Gezinmenin erişilebilir adı. Verilmezse kütüphane metni ui.stepper.label kullanılır ('İlerleme' ya da 'Progress').

Tür

string

className

Açıklama

Kök öğeye eklenir; yalnızca yerleşim için kullanın.

Tür

string

WizardFooter

stepZorunlu

Açıklama

Geçerli adımın sırası, 0'dan.

Tür

number

totalZorunlu

Açıklama

Adım sayısı.

Tür

number

onBack

Açıklama

Geri düğmesi çağırır. Geri ilk adımda gizlidir.

Tür

() => void

onNext

Açıklama

İleri ya da son adımda Tamamla çağırır. nextType submit ise çağrılmaz; form gönderilir.

Tür

() => void

nextType

Açıklama

submit İleri'nin çevreleyen formu göndermesini sağlar; böylece bir Form adımı önce denetler.

Tür

'button' | 'submit'

Varsayılan

'button'

nextLabel

Açıklama

İleri düğmesinin metni. Verilmezse ui.wizard.next ('İleri' ya da 'Next').

Tür

string

finishLabel

Açıklama

Son adımdaki metin. Verilmezse ui.wizard.finish ('Tamamla' ya da 'Finish').

Tür

string

loading

Açıklama

Adım kaydedilirken İleri'de döner gösterge gösterir; bu sırada Geri kapalıdır.

Tür

boolean

Varsayılan

false

nextDisabled

Açıklama

İleri'yi devre dışı bırakır.

Tür

boolean

Varsayılan

false

showCount

Açıklama

Geri'nin yanında "Adım 2 / 4" gösterir.

Tür

boolean

Varsayılan

true

actions

Açıklama

İleri'den önce ek eylemler, ör. üçüncül bir "Taslak kaydet" düğmesi.

Tür

ReactNode

className

Açıklama

Kök öğeye eklenir; yalnızca yerleşim için kullanın.

Tür

string

Veri öznitelikleri

• data-component="stepper" ve data-component="wizard-footer".
• Adımda data-status (complete, current, upcoming, error); data-part: marker, label, description, step, compact.
• WizardFooter data-part: back, count, next.