Day Stripv1.0.0
وقتی کاربر از چند روزِ نزدیک یکی را انتخاب می‌کند (نوبتِ پزشک، رزروِ میز، زمانِ تحویل) و تقویمِ کامل زیادی است. هر روز نامِ روز (یا «امروز» و «فردا»)، تاریخِ شمسی و یک خطِ وضعیت دارد: ظرفیت به رنگِ موفقیت، پر یا تعطیل کم‌رنگ. روزِ پر انتخاب‌شدنی می‌ماند تا صفحه بگوید چرا خالی است و روزِ بعدی را پیشنهاد دهد. برای بلیت با کم‌ترین قیمتِ هر روز از Fare Date Strip استفاده کنید.
کد، دستور نصب و مرجع API این صفحه با فریم‌ورک انتخابی عوض می‌شود.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
نصب
با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.
npx digdesign@latest add https://docs.digdesign.ir/r/day-strip.jsonpnpm dlx digdesign@latest add https://docs.digdesign.ir/r/day-strip.jsonyarn dlx digdesign@latest add https://docs.digdesign.ir/r/day-strip.jsonbunx --bun digdesign@latest add https://docs.digdesign.ir/r/day-strip.jsonVue هنوز CLI اختصاصی دیگ ندارد. فایل رجیستری برای ابزارهای خودتان در دسترس است، ولی برای نصب از تب «دستی» استفاده کنید.
curl -O https://docs.digdesign.ir/r/vue/day-strip.jsonSvelte هنوز CLI اختصاصی دیگ ندارد. فایل رجیستری برای ابزارهای خودتان در دسترس است، ولی برای نصب از تب «دستی» استفاده کنید.
curl -O https://docs.digdesign.ir/r/svelte/day-strip.jsonAngular هنوز CLI اختصاصی دیگ ندارد. فایل رجیستری برای ابزارهای خودتان در دسترس است، ولی برای نصب از تب «دستی» استفاده کنید.
curl -O https://docs.digdesign.ir/r/angular/day-strip.jsonاستفاده
import { DayStrip } from "@/components/ui/day-strip"این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
ترکیب اجزا
یک کامپوننت با آرایهٔ days؛ نامِ روز و تاریخ از خودِ Date با تقویمِ شمسی ساخته می‌شود و label جایش را می‌گیرد. meta و tone وضعیت را می‌گویند و description متنِ کاملِ صفحه‌خوان است.
دسترس‌پذیری
- یک radiogroup با برچسب است؛ فقط روزِ انتخاب‌شده در ترتیبِ Tab است و فلش‌ها روز به روز می‌روند (در RTL فلشِ چپ روزِ بعد)، Home و End به دو سر.
- هر روز نامِ کامل برای صفحه‌خوان دارد: «فردا، ۲۶ مهر، ۳ نوبتِ خالی».
- روزِ انتخاب‌شده هم حاشیه و زمینه می‌گیرد؛ فقط به رنگ تکیه نمی‌کند.
مرجع API
DayStrip
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| days | { date; label?; meta?; tone?; description? }[] | — | روزها؛ tone یکی از default، success یا muted. |
| value / onValueChange | Date / (date: Date) => void | — | روزِ انتخاب‌شده (هر Dateِ همان روز). |
| aria-label | string | "روز" | برچسبِ گروه. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.