انتقل إلى المحتوى

القائمة

احصل على Ritla UI

لوحة صفوف تفتح من زر: اختيار واحد، أو عدة اختيارات، أو قوائم فرعية لمستويين. تفتح عند بداية الزر، أي على اليمين في العربية، والقوائم الفرعية نحو نهاية السطر.

المعاينة

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

المعاينةالكود
إنجليزيمعكوسعربي
← RTL

التثبيت

  1. أضف المكوّن

    npx ritla add menu

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

  2. الاعتماديات التي يضيفها

    @base-ui/react@phosphor-icons/react

  3. أو انسخه يدويًا

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

الاستخدام

menu.tsx
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: صفوف بمربعات اختيار وسطر ثانٍ، وتبقى القائمة مفتوحة أثناء التبديل. عنوان المجموعة يسمّيها لقارئ الشاشة.

إنجليزيمعكوسعربي
← RTL

عدة مستويات

Type = Multi level مع قائمة فرعية مفتوحة لمستويين: كل مستوى يفتح عند نهاية صفه، أي إلى اليسار في العربية، والسهم الأيسر يفتحه.

إنجليزيمعكوسعربي
← RTL

مرجع الخصائص

Menu

الجذر: يحمل الحالة.

الخاصيةالنوعالافتراضيالوصف
open / defaultOpenbooleanلا يوجدفتح القائمة (متحكَّم به أو لا).
onOpenChange(open: boolean) => voidلا يوجديُستدعى عند الفتح والإغلاق.

MenuContent

اللوحة، وتُعرض في طبقة فوق الصفحة.

الخاصيةالنوعالافتراضيالوصف
align"start" | "center" | "end""start"المحاذاة مع الزر؛ في Figma عند بداية السطر.
sideOffsetnumber12المسافة عن الزر بالبكسل.

MenuRadioGroup, MenuRadioItem

Type = Single select: اختيار واحد، والصف المختار بعلامة صح عند نهاية السطر.

الخاصيةالنوعالافتراضيالوصف
value / defaultValue / onValueChangestringلا يوجدMenuRadioGroup: الاختيار الحالي.
valuestringلا يوجدMenuRadioItem: قيمة هذا الصف.

MenuCheckboxItem

Type = Multi select: صف يُبدَّل.

الخاصيةالنوعالافتراضيالوصف
checked / defaultChecked / onCheckedChangebooleanلا يوجدمفعّل أم لا.
descriptionReactNodeلا يوجدسطر ثانٍ تحت العنوان.

MenuSubmenu, MenuSubmenuTrigger, MenuSubmenuContent

Type = Multi level: صف يفتح قائمة أخرى، ويمكن أن تحوي قائمة فرعية بدورها.

الخاصيةالنوعالافتراضيالوصف
childrenReactNodeلا يوجد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-14 Semibold. الصفوف 48 بكسل وتتسع للعربية.
النص ثنائي الاتجاه
اسم لاتيني في نهاية صف عربي («تنزيل PDF») يُعرض صحيحًا؛ في وسطه ضعه في <bdi>.

الفحوص التي يجتازها

فحوص ريتلا التي يجتازها هذا المكوّن بطريقة بنائه. إن استُخدم كما هو موثّق، لا يحمل هذه الأخطاء إلى صفحتك.

  • R050نص عربي يسقط إلى خط غير الخط المعلن (مقيسًا، أو وفق الإعلان، أو لأن خط الويب فشل في التحميل)
  • R051تباعد حروف مطبَّق على نص عربي (يكسر الخط المتصل)
  • R042نص مقصوص: محتوى أعرض من صندوقه مع overflow مخفي وبلا علامة حذف
  • R043حاوية بعرض ثابت بالبكسل يتجاوز نصها العربي المساحة