الثيم كنز

المكوّنات

المنتقي الدوّار

يختار الناس تاريخًا أو وقتًا بتمرير أعمدة، وهو النمط المعتاد على الجوال لموعد قريب أو وقت. في العربية يكون اليوم على اليمين و«ص» و«م» على اليسار، وتبقى الساعة ثم الدقيقة من اليسار إلى اليمين كما تُكتب الأوقات، والأيام والأشهر بأسمائها العربية.

Figma

المعاينة

«معكوس» هو المحتوى الإنجليزي نفسه من اليمين إلى اليسار، ليفصل خطأ الاتجاه عن خطأ الترجمة.

التثبيت

قريبًايُفتح التثبيت من السجل قريبًا، وهذه هي الأوامر التي ستشغّلها حينها.

npx ritla add wheel-picker

ويعمل أيضًا مع shadcn: npx shadcn@latest add @ritla/wheel-picker

التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.

الاستخدام

import { WheelDateTimePicker } from "@/components/ui/wheel-picker";

const [value, setValue] = useState(() => nextFiveMinutes());

<WheelDateTimePicker value={value} onValueChange={setValue} minuteStep={5} />

أمثلة

التاريخ

WheelDatePicker: اليوم والشهر والسنة، واليوم أولًا في ترتيب القراءة. الأشهر مختصرة بالإنجليزية ومكتوبة كاملة بالعربية، والسنوات خمس قبل القيمة وخمس بعدها افتراضيًا (minYear وmaxYear). لتاريخ الميلاد اكتب التاريخ في حقل بدل التمرير عبر السنوات.

احصل على الكود ›

في ورقة سفلية من حقل

الحقل يعرض القيمة ويفتح ورقة سفلية (Drawer) عنوانها عنوان الحقل. «تم» يحفظ القيمة الجديدة، و«إلغاء» أو زر الإغلاق أو السحب للأسفل يتركها كما كانت. لا تترك العجلة مفتوحة داخل الصفحة.

احصل على الكود ›

مرجع الخصائص

WheelDateTimePicker

الخاصية	النوع	الافتراضي	الوصف
`value / onValueChange`	`Date / (value: Date) => void`	لا يوجد	القيمة، دائمًا تاريخ ووقت كاملان. ابدأ بقيمة مناسبة: اليوم، وأقرب خمس دقائق قادمة.
`min / max`	`Date`	`today / 60 days later`	أول يوم وآخر يوم معروضان. حدّها بما يصح، مثل عدم عرض أيام مضت للتوصيل.
`minuteStep`	`number`	`5`	الدقائق بخطوات من هذا الرقم.
`hourCycle`	`"h12" \| "h23"`	`"h12"`	‏12 ساعة مع عمود ص / م، أو 24 ساعة بلا عمود.
`labels`	`{ group, day, hour, minute, period }`	لا يوجد	أسماء المجموعة والأعمدة لقارئ الشاشة. الافتراضي بلغة الصفحة؛ كرّر تسمية الحقل في `group`.
`locale / numerals`	`string / "latn" \| "arab"`	لا يوجد	الافتراضي من `KanzProvider`. الأسماء من Intl بلغة الصفحة، وكل الأعمدة بنظام أرقام واحد.

WheelDatePicker

الخاصية	النوع	الافتراضي	الوصف
`value / onValueChange`	`Date / (value: Date) => void`	لا يوجد	اليوم الذي يتجاوز آخر الشهر الجديد ينتقل إلى آخر يوم فيه (31 مايو ثم يونيو: 30 يونيو).
`minYear / maxYear`	`number`	`value ± 5`	السنوات المعروضة.
`labels`	`{ group, day, month, year }`	لا يوجد	أسماء المجموعة والأعمدة.

WheelPicker / WheelPickerColumn

الخاصية	النوع	الافتراضي	الوصف
`options`	`{ value, label, valueText?, disabled? }[]`	لا يوجد	صفوف العمود. `valueText` ما يقوله قارئ الشاشة، و`disabled` صف يبقى ظاهرًا ويتخطاه العمود (موعد محجوز).
`value / onValueChange`	`string / (value: string) => void`	لا يوجد	قيمة الصف في الشريط.
`label`	`string`	لا يوجد	اسم العمود («الساعة»).
`aria-label (WheelPicker)`	`string`	لا يوجد	اسم المجموعة كلها؛ كرّر تسمية الحقل.

إمكانية الوصول

لوحة المفاتيح

المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.

المفتاح	ما يفعله
`Tab`	من عمود إلى العمود التالي: في منتقي التاريخ والوقت اليوم، ثم الساعة، ثم الدقيقة، ثم ص / م.
`ArrowUpArrowDown`	صفًا للأعلى أو للأسفل في العمود.
`PageUpPageDown`	خمسة صفوف.
`HomeEnd`	أول صف وآخر صف.

ARIA

كل عمود spinbutton باسمه وقيمته مقروءة بالكلمات في aria-valuetext («الأربعاء 30 ديسمبر»)، لا لون الشريط وحده.
الأعمدة مجموعة باسم الحقل. الصفوف للعرض فقط، ومخفية عن قارئ الشاشة.
التمرير بزخم المنصة نفسها ويستقر بالالتقاط (CSS scroll snap)؛ مع تقليل الحركة ينتقل العمود دون انزلاق.
التمرير صعب على بعض الناس: اعرض القيمة في حقل يقبل الكتابة أيضًا.

ملاحظات العربية والاتجاه

ينعكس

ترتيب الأعمدة: اليوم على اليمين حيث يبدأ القارئ، ثم الوقت، ثم ص / م على اليسار.

لا ينعكس

التمرير عمودي: الأعلى والأسفل لا يتغيران، ولا تنعكس الصفوف داخل العمود.
الساعة ثم الدقيقة من اليسار إلى اليمين في كل اللغات، كما على الساعة؛ ص / م وحدها تنتقل إلى الجهة الأخرى. ترتيب Tab يتبعهما: الساعة ثم الدقيقة.

الأرقام: كل الأعمدة بنظام أرقام واحد من numerals: «6 25» أو «٦ ٢٥»، ولا خلط بينهما في عجلة واحدة.
الخط العربي: الصفوف body-24 بوزن Semibold بارتفاع 48 بكسل؛ الأسماء العربية الطويلة («الأربعاء 30 ديسمبر») تعرّض العمود ولا تلتف.
النص ثنائي الاتجاه: أسماء الأشهر العربية من Intl من يناير إلى ديسمبر، وهي المجموعة نفسها في منتقي التاريخ وبقية المنتج.