القائمة
لوحة صفوف تفتح من زر: اختيار واحد، أو عدة اختيارات، أو قوائم فرعية لمستويين. تفتح عند بداية الزر، أي على اليمين في العربية، والقوائم الفرعية نحو نهاية السطر.
المعاينة
«معكوس» هو المحتوى الإنجليزي نفسه من اليمين إلى اليسار، ليفصل خطأ الاتجاه عن خطأ الترجمة.
التثبيت
أضف المكوّن
npx ritla add menuويعمل أيضًا مع shadcn:
npx shadcn@latest add @ritla/menuالاعتماديات التي يضيفها
@base-ui/react@phosphor-icons/reactأو انسخه يدويًا
التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.
الاستخدام
import { Button } from "@/components/ui/button";import { Menu, MenuContent, MenuRadioGroup, MenuRadioItem, MenuTrigger } from "@/components/ui/menu";<Menu> <MenuTrigger render={<Button variant="outline" />}>This month</MenuTrigger> <MenuContent> <MenuRadioGroup value={period} onValueChange={setPeriod}> <MenuRadioItem value="week">This week</MenuRadioItem> <MenuRadioItem value="month">This month</MenuRadioItem> </MenuRadioGroup> </MenuContent></Menu>أمثلة
عدة اختيارات
Type = Multi select: صفوف بمربعات اختيار وسطر ثانٍ، وتبقى القائمة مفتوحة أثناء التبديل. عنوان المجموعة يسمّيها لقارئ الشاشة.
عدة مستويات
Type = Multi level مع قائمة فرعية مفتوحة لمستويين: كل مستوى يفتح عند نهاية صفه، أي إلى اليسار في العربية، والسهم الأيسر يفتحه.
مرجع الخصائص
Menu
الجذر: يحمل الحالة.
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
open / defaultOpen | boolean | لا يوجد | فتح القائمة (متحكَّم به أو لا). |
onOpenChange | (open: boolean) => void | لا يوجد | يُستدعى عند الفتح والإغلاق. |
MenuContent
اللوحة، وتُعرض في طبقة فوق الصفحة.
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
align | "start" | "center" | "end" | "start" | المحاذاة مع الزر؛ في Figma عند بداية السطر. |
sideOffset | number | 12 | المسافة عن الزر بالبكسل. |
MenuRadioGroup, MenuRadioItem
Type = Single select: اختيار واحد، والصف المختار بعلامة صح عند نهاية السطر.
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
value / defaultValue / onValueChange | string | لا يوجد | MenuRadioGroup: الاختيار الحالي. |
value | string | لا يوجد | MenuRadioItem: قيمة هذا الصف. |
MenuCheckboxItem
Type = Multi select: صف يُبدَّل.
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
checked / defaultChecked / onCheckedChange | boolean | لا يوجد | مفعّل أم لا. |
description | ReactNode | لا يوجد | سطر ثانٍ تحت العنوان. |
MenuSubmenu, MenuSubmenuTrigger, MenuSubmenuContent
Type = Multi level: صف يفتح قائمة أخرى، ويمكن أن تحوي قائمة فرعية بدورها.
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
children | ReactNode | لا يوجد | MenuSubmenuTrigger: العنوان، ويضاف سهم عند نهاية السطر. |
MenuItem, MenuLinkItem, MenuGroup, MenuLabel, MenuSeparator
الصفوف والأقسام نفسها في زر القائمة، حيث تجد خصائص الأيقونة والسطر الثاني والعدد والإجراء الخطِر.
| الخاصية | النوع | الافتراضي | الوصف |
|---|
إمكانية الوصول
لوحة المفاتيح
المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.
| المفتاح | ما يفعله |
|---|---|
| EnterSpaceArrowDown | على الزر: يفتح القائمة ويركّز الصف الأول. |
| ArrowDownArrowUp | ينتقل بين الصفوف ويلتف عند الطرفين. |
| ArrowRightArrowLeft | يفتح القائمة الفرعية ويغلقها. في العربية ينعكس: السهم الأيسر يفتح. |
| SpaceEnter | على اختيار: يختاره أو يبدّله، وتبقى القائمة مفتوحة. |
| Escape | يغلق مستوى واحدًا، ومن المستوى الأول يعيد التركيز إلى الزر. |
ARIA
- القائمة
role="menu"، والاختياراتmenuitemradioوmenuitemcheckboxمعaria-checked، فلا يعتمد الاختيار على العلامة وحدها. - الصف الذي يفتح قائمة فرعية يحمل
aria-haspopupوaria-expanded. MenuLabelيسمّي مجموعته، فتعلن قارئات الشاشة اسم القسم.
ملاحظات العربية والاتجاه
ينعكس
- القائمة تفتح عند بداية الزر (اليمين في العربية)، وكل قائمة فرعية نحو نهاية صفها (اليسار).
- سهم القائمة الفرعية ينعكس، والأسهم على لوحة المفاتيح تتبع اتجاه القراءة.
- القائمة تأخذ اتجاه الزر ولغته، حتى داخل جزيرة عربية في صفحة إنجليزية.
لا ينعكس
- علامة الصح في الصف المختار لا تنعكس، وإن كانت في نهاية السطر.
- الأسماء اللاتينية مثل PDF وCSV تبقى من اليسار إلى اليمين.
- الأرقام
- الأعداد في الصفوف وعلى الزر تُنسّق بـ
formatNumber، فتتبع إعداد الأرقام. - الخط العربي
- العنوان
label-14بوزن Medium، والسطر الثانيlabel-12، وعنوان القسمbody-14Semibold. الصفوف 48 بكسل وتتسع للعربية. - النص ثنائي الاتجاه
- اسم لاتيني في نهاية صف عربي («تنزيل PDF») يُعرض صحيحًا؛ في وسطه ضعه في
<bdi>.
الفحوص التي يجتازها
فحوص ريتلا التي يجتازها هذا المكوّن بطريقة بنائه. إن استُخدم كما هو موثّق، لا يحمل هذه الأخطاء إلى صفحتك.