Ticket Cardv1.0.0
برای فهرستِ نتایجِ بلیت. بالای کارت مسیر است: ساعتِ حرکت و رسیدن با شهرها روی یک خطِ مسیر و مدتِ سفر، و زیرش لوگو و نامِ شرکت. ستونِ کناری جزئیات (تاریخ، شمارهٔ قطار یا پرواز، بارِ مجاز) و برچسبِ کلاس را دارد. پایینِ کارت صندلیِ باقی‌مانده، قیمتِ هر بزرگسال و دکمهٔ خرید است؛ صندلی که کم شد قرمز می‌شود. بلیتِ تمام‌شده با soldOut سرِ تیره و نشانِ «تکمیلِ ظرفیت» می‌گیرد.
این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
نصب
با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.
npx digdesign@latest add https://docs.digdesign.ir/r/ticket-card.jsonpnpm dlx digdesign@latest add https://docs.digdesign.ir/r/ticket-card.jsonyarn dlx digdesign@latest add https://docs.digdesign.ir/r/ticket-card.jsonbunx --bun digdesign@latest add https://docs.digdesign.ir/r/ticket-card.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
استفاده
import { TicketCard, TicketCardDetail } from "@/components/ui/ticket-card"این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
ترکیب اجزا
TicketCard خودش article است و فقط چیدمان را می‌دهد؛ ساعت را به شکلِ «07:25» بدهید تا ارقام فارسی شوند، قیمت را قالب‌بندی‌شده (formatCurrency) و دکمه را آماده. جزئیات را با TicketCardDetail بدهید (هر کدام یک ردیف با آیکون) و کلاس یا نوعِ واگن را با Badge. لوگوی شرکت معمولاً Avatar است؛ اگر لوگوی واقعی ندارید آیکونِ وسیله یا حروفِ اول با رنگِ شرکت. کارت‌ها را در یک ul بچینید و نتایجِ تمام‌شده را جدا، زیرِ عنوانِ «تکمیلِ ظرفیت»، با soldOut.
دسترس‌پذیری
- هر کارت یک article با عنوانِ پنهان است که شرکت، مبدأ و مقصد و ساعت‌ها را یک‌جا می‌خواند، پس فهرستِ کارت‌ها با کلیدِ عنوان پیمایش می‌شود.
- ساعت‌ها در time هستند (با dateTime اختیاری) و «+۱» برای صفحه‌خوان «روزِ بعد» خوانده می‌شود. خطِ مسیر تزئینی است و مدتِ سفر جداگانه خوانده می‌شود.
- کم بودنِ صندلی فقط با رنگ گفته نمی‌شود؛ عدد همیشه هست و رنگ تأکید است.
مرجع API
TicketCard
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| departure / arrival | { time: string; place: ReactNode; dateTime?: string } | — | ساعت مثلِ «07:25» (ارقام خودکار فارسی) و مبدأ یا مقصد. arrival.nextDay کنارِ ساعت «+۱» می‌گذارد. |
| duration / icon | React.ReactNode | — | مدتِ سفر روی خطِ مسیر و آیکونِ وسیله وسطِ آن. |
| logo / operator | React.ReactNode | — | لوگوی شرکت (معمولاً Avatar) و نامِ قطار یا ایرلاین. |
| details / tags | React.ReactNode | — | ردیف‌های TicketCardDetail و Badgeهای کلاس. |
| seatsLeft / lowSeats | number | — / 10 | صندلیِ باقی‌مانده؛ کمتر یا برابرِ lowSeats قرمز. |
| price / originalPrice / priceLabel | React.ReactNode | — / — / "قیمت برای هر بزرگسال" | قیمتِ قالب‌بندی‌شده، قیمتِ پیش از تخفیف و برچسبش. |
| action | React.ReactNode | — | دکمهٔ خرید یا «خبرم کن». |
| soldOut / soldOutLabel / soldOutHint | boolean / ReactNode / ReactNode | false / "تکمیلِ ظرفیت" / — | سرِ تیره با نشانِ قرمز و متنِ کنارش؛ قیمت و صندلی پنهان. |
TicketCardDetail
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| icon | React.ReactNode | — | آیکونِ ۱۶ پیکسلیِ کنارِ ردیف؛ بقیهٔ پراپ‌ها روی li. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
نمونه‌ها
پرواز با تخفیف و صندلیِ کم
دو برچسب (کلاس و چارتری/سیستمی)، قیمتِ پیش از تخفیف خط‌خورده و lowSeats=5 که «۴ صندلیِ خالی» را قرمز می‌کند.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
تکمیلِ ظرفیت
soldOut قیمت و صندلی را برمی‌دارد و سرِ تیره با نشانِ قرمز می‌گذارد؛ action می‌تواند «خبرم کن» باشد. arrival.nextDay کنارِ ساعتِ رسیدن «+۱» می‌گذارد.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
فقط مسیر
بی‌قیمت و بی‌دکمه، پایینِ کارت نمی‌آید؛ همان مسیر و شرکت.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار می‌آید |
|---|---|
| پرواز با تخفیف و صندلیِ کم | نتایجِ بلیتِ هواپیما |
| تکمیلِ ظرفیت | بلیتِ تمام‌شده |
| فقط مسیر | خلاصهٔ سفر در سبد یا بلیتِ صادرشده |
دستورالعمل استفاده
تمام‌شده‌ها جدا و پایین
انجام بده
بلیتِ قابلِ خرید بالا؛ تکمیل‌شده‌ها زیرِ عنوانِ خودشان با سرِ تیره و «خبرم کن».
انجام نده
بلیتِ تمام‌شده لای بقیه با دکمهٔ خریدِ غیرفعال؛ کاربر روی هر کارت مکث می‌کند.