خط زمان
timelineکامپوننترویدادها با تاریخ شمسی، خط در سمت راست.
سفارش تحویل شد
۲۸ شهریور ۱۴۰۵
بسته ارسال شد
۲۶ شهریور ۱۴۰۵
پست پیشتاز، کد رهگیری پیامک شد
پرداخت تأیید شد
۲۵ شهریور ۱۴۰۵
نصب
با CLI
اگر هنوز init نکردهاید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور قطعه و وابستگیهایش را مینویسد.
$ npx vibefarsi add timelineنصب دستی
محتوای تب «کد» را در
components/ui/timeline.tsxبگذارید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { Timeline } from "@/components/ui/timeline"23<Timeline items={[{ date: new Date(), title: "سفارش تحویل شد" }, { date: "۲۳ شهریور", title: "بسته ارسال شد" }]} />پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| items | { date: Date | string; title; description? }[] | - | Date به شمسی تبدیل میشود. |
| activeIndex | number | 0 | رویداد پررنگ. |