Stepper

Çok adımlı iş akışları için yatay veya dikey ilerleme göstergesi.

Stepper.tsx

Proje bilgileri
Temel ayarları tamamlayın.
Tema
Renkleri ve tipografiyi seçin.
Yayınla
Son kontrolleri yapın.

Kurulum

shadcn CLI ile projenize ekleyebilir veya yukarıdaki "Kaynak Kodu" sekmesinden kodu doğrudan projenize kopyalayabilirsiniz:

$npx shadcn@latest add https://ui.cagriozay.com.tr/r/stepper.json

Kullanım Örneği

import { Stepper } from "@/components/ui"

<Stepper
  items={[{ id: "details", label: "Bilgiler" }, { id: "publish", label: "Yayınla" }]}
  currentStep={1}
  onStepChange={setCurrentStep}
/>

Özellikler & Parametreler (API)

Prop	Tür	Varsayılan	Açıklama
items	StepperItem[]	—	Kimlik, başlık ve açıklama içeren adımlar.
currentStep	number	—	Sıfır tabanlı aktif adım indeksi.
orientation	"horizontal" \| "vertical"	"horizontal"	Adımların yerleşim yönü.
onStepChange	(step: number) => void	—	Tıklanabilir adım değişikliği callback'i.
linear	boolean	false	Aktif adımdan sonraki ilk adımdan ileri atlamayı engeller.
disabled	boolean	false	Tüm adım etkileşimlerini kapatır.
ariaLabel	string	"İlerleme adımları"	Sıralı adım listesinin erişilebilir adı.
renderMarker	(item, index, state) => ReactNode	—	Adım numarası veya tamamlanma ikonunu özelleştirir.