Fare Date Stripv1.0.0
بالای نتایجِ قطار، پرواز یا اتوبوس، تا کاربر بی‌آنکه دوباره جست‌وجو کند روزِ ارزان‌تر را پیدا کند. هر روز روزِ هفته و تاریخِ شمسی و کم‌ترین قیمتِ آن روز را دارد؛ ارزان‌ترین روزِ بازه سبز است، روزی که همه‌چیزش فروخته شده «تکمیل» می‌خورد و روزِ انتخاب‌شده قابِ پررنگ می‌گیرد. در گوشی نوار افقی می‌لغزد و روزِ انتخاب‌شده خودش به دید می‌آید.
این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
نصب
با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.
npx digdesign@latest add https://docs.digdesign.ir/r/fare-date-strip.jsonpnpm dlx digdesign@latest add https://docs.digdesign.ir/r/fare-date-strip.jsonyarn dlx digdesign@latest add https://docs.digdesign.ir/r/fare-date-strip.jsonbunx --bun digdesign@latest add https://docs.digdesign.ir/r/fare-date-strip.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
استفاده
import { FareDateStrip, type FareDay } from "@/components/ui/fare-date-strip"این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
ترکیب اجزا
FareDateStrip فقط روز را عوض می‌کند؛ جست‌وجوی دوباره و نشان‌دادنِ اسکلتِ بارگذاری کارِ صفحه است. قیمت‌ها پیش‌فرض به هزار تومان و بی‌واحد نوشته می‌شوند تا نوار جمع‌وجور بماند؛ واحد را یک بار بالای نوار بنویسید («کم‌ترین قیمتِ هر روز، هزار تومان») و برای صفحه‌خوان با priceUnit کنارِ هر عدد خوانده می‌شود. اگر قیمتِ روزی هنوز نیامده price را null بگذارید تا «—» بخورد.
دسترس‌پذیری
- نوار یک radiogroup است و هر روز یک radio با aria-checked؛ فقط روزِ انتخاب‌شده در ترتیبِ Tab است و فلش‌ها روز را عوض می‌کنند (در راست‌به‌چپ فلشِ چپ روزِ بعد)، Home و End اول و آخر.
- ارزان‌ترین روز فقط با رنگ گفته نمی‌شود؛ برای صفحه‌خوان «ارزان‌ترین روز» کنارِ قیمت خوانده می‌شود و روزِ تکمیل متنِ «تکمیل» دارد.
- اسکرولِ خودکار فقط خودِ نوار را جابه‌جا می‌کند، نه صفحه را.
مرجع API
FareDateStrip
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| days | { date: Date; price?: number | null; soldOut?: boolean }[] | — | روزهای نوار به ترتیب؛ معمولاً هفت روز دورِ روزِ جست‌وجو. |
| value / defaultValue | Date | — / روزِ اول | روزِ انتخاب‌شده (هر Dateِ همان روز). |
| onValueChange | (date: Date) => void | — | با کلیک یا فلش. |
| formatPrice | (price: number) => string | هزار تومان بی‌واحد | نوشتنِ قیمت در هر روز. |
| priceUnit | string | "هزار تومان" | واحد برای صفحه‌خوان کنارِ هر قیمت. |
| aria-label | string | "تاریخِ حرکت" | نامِ گروه. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
نمونه‌ها
قیمتِ پرواز به میلیون
formatPrice و priceUnit واحد را عوض می‌کنند؛ اینجا «۲٫۴۸ م» با «میلیون تومان» برای صفحه‌خوان.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
قیمت‌ها هنوز نیامده
price: null یعنی «—»؛ روزها انتخاب‌پذیرند و نتایج جدا بارگذاری می‌شوند.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار می‌آید |
|---|---|
| قیمتِ پرواز به میلیون | پرواز، قیمت‌های بالا |
| قیمت‌ها هنوز نیامده | تقویمِ قیمت جدا بارگذاری می‌شود |
دستورالعمل استفاده
واحد یک بار، بالای نوار
انجام بده
«کم‌ترین قیمتِ هر روز (هزار تومان)» بالای نوار و در هر روز فقط عدد.
انجام نده
«۷۶۰٬۰۰۰ تومان» در هر خانه؛ خانه‌ها پهن می‌شوند و در گوشی دو روز بیشتر جا نمی‌شود.