bloxa

Stepper

FREE

Yatay veya dikey çok adımlı ilerleme; dolan bağlantılar, hata ve isteğe bağlı adımlar.

Kurulum

Terminal
npx @bloxa/cli add stepper
# or: npx shadcn@latest add @bloxa/stepper

Otomatik kurulan paketler: motion

Örnekler

Ödeme adımları

Tamamlanan adıma tıklayarak geri dön.

  1. Cart3 items
  2. 2
    AddressWhere to ship
  3. 3
    Gift noteİsteğe bağlı
  4. 4
    Payment

Dikey, hatalı adım

  1. Create accountDone in 30 seconds
  2. Verify emailCode sent to [email protected]
  3. !
    Connect domainDNS check failed
  4. 4
    Invite team

API

Her bileşen, oluşturduğu HTML elemanının özelliklerini de kabul eder.

Stepper

ÖzellikTipVarsayılanAçıklama
steps{ title, description?, icon?, error?, optional? }[]—Adımlar.
currentnumber—Geçerli adım (0'dan).
orientation"horizontal" | "vertical""horizontal"Yön.
onStepClick(index) => void—Tamamlanan adıma dönüş.
size"sm" | "md""md"Boyut.