مراحل
stepperکامپوننتنمایش گامهای فرم چندمرحلهای، افقی یا عمودی، از راست به چپ.
سبد
- ۲
آدرس
- ۳
پرداخت
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add stepperنصب دستی
محتوای تب «کد» را در
components/ui/stepper.tsxبگذارید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { Stepper } from "@/components/ui/stepper"23<Stepper current={1} steps={[{ label: "سبد" }, { label: "آدرس", description: "کجا بفرستیم؟" }, { label: "پرداخت" }]} />پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| current | number | - | شاخص گام فعلی (از صفر). |
| orientation | "horizontal" | "vertical" | "horizontal" | جهت چیدمان. |