Stepper

Ne zaman kullanılır

Stepper, sırası belli üç ile yedi adımlık akışlar içindir: hesap kurulumu, bir başvuru, içe aktarma. WizardFooter aynı akışın alt çubuğudur.

Ne zaman kullanılmaz

• İki adım için: başlıkta “Adım 1 / 2” yeterlidir.
• Sırası olmayan bölümler için: Tabs ya da bir içerik listesi kullanın.
• İlerleme yüzdesi için: Meter kullanın.

Anatomi

Adım 2 / 3: Tercihler

1. Bilgiler, tamamlandıAd ve iletişim
2. 2Tercihler, geçerli adımBildirim ve dil
3. 3ÖzetKontrol edip gönderin

AçıkKoyu

Kodu kopyala

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

const steps = [
  { id: 'details', label: 'Bilgiler', description: 'Ad ve iletişim' },
  { id: 'preferences', label: 'Tercihler', description: 'Bildirim ve dil' },
  { id: 'review', label: 'Özet', description: 'Kontrol edip gönderin' },
];

export default function Default() {
  return (
    <Stepper steps={steps} current={1} className="max-w-2xl" />
  );
}

1. İşaret: 24 px; tamamlananda onay, geçerlide halka ve numara, sonrakinde soluk numara.
2. Ad ve açıklama: Açıklama isteğe bağlı.
3. Bağlantı çizgisi: Önceki adım tamamlanınca dolar.
4. WizardFooter: Geri, “Adım 2 / 3”, ek eylemler ve İleri ya da Tamamla.

Davranış

• Bir adım tamamlanınca onay işareti büyüyerek belirir, sonraki çizgi dolar.
• onStepChange verilirse tamamlanan ve dikkat gerektiren adımlar düğme olur; sonraki adımlara atlanamaz.
• WizardFooter loading sırasında İleri’de döner göstergeyi gösterir ve Geri’yi kapatır.
• nextType="submit" ile İleri çevreleyen formu gönderir; böylece Form adımı denetler.

Yönergeler

• Adım adlarını kısa ad olarak yazın: “Bilgiler”, “Tercihler”.
• Kullanıcıyı geri gitmekten alıkoymayın; girilen verileri koruyun.
• Son adımda İleri yerine ne olacağını söyleyin: finishLabel="Gönder".

İçerik

Türkçe	İngilizce
İlerleme	Progress
tamamlandı / geçerli adım / düzeltilmesi gerekiyor	complete / current step / needs attention
Adım {current} / {total}	Step {current} of {total}
Geri / İleri / Tamamla	Back / Next / Finish

İlgili bileşenler

• Form: Adım içindeki alanların denetimi.
• Meter: Yüzde ilerleme.