Bileşenler

Stepper

Çok adımlı bir akışta nerede olunduğunu gösteren adımlar ve Geri, İleri düğmeli WizardFooter.

Storybook: Storybook
Kaynak kod: Kaynak kod

Aşağıdaki örnek Storybook’tan canlı yüklenir; denetimleri Storybook’ta açabilirsiniz.

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

Önceki adımlar tamamlanmıştır; aralarındaki çizgi dolar. 640 px altında yalnızca işaretler ve geçerli adımın adı kalır.

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" />
  );
}

Dikey

Açıklamalar her işaretin yanında; yan panel ve uzun akışlar için.

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 Vertical() {
  return (
    <Stepper steps={steps} current={1} orientation="vertical" />
  );
}

Dikkat gerektiren adım

error olan adım tehlike rengini alır ve “düzeltilmesi gerekiyor” olarak okunur.

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 Attention() {
  return (
    <Stepper steps={steps.map((step, index) => (index === 0 ? { ...step, error: true } : step))} current={2} className="max-w-2xl" />
  );
}

WizardFooter ile

onStepChange tamamlanan adımları düğme yapar. WizardFooter ilk adımda Geri’yi gizler, son adımda Tamamla der.

Adım 2 / 3

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

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 Wizard() {
  const [current, setCurrent] = useState(1);
  return (
    <div className="flex max-w-2xl flex-col gap-xl">
      <Stepper steps={steps} current={current} onStepChange={setCurrent} />
      <WizardFooter
        step={Math.min(current, steps.length - 1)}
        total={steps.length}
        onBack={() => setCurrent((step) => Math.max(0, step - 1))}
        onNext={() => setCurrent((step) => Math.min(steps.length, step + 1))}
        actions={<Button variant="tertiary">Taslak kaydet</Button>}
      />
    </div>
  );
}

Açık ve koyu mod

Tamamlanan adımlar birincil dolgu alır.

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" />
  );
}