قائمة إجراءات

DropdownMenu

قائمة إجراءات منسدلة في React مبنية على Radix بعناصر ومربّعات اختيار وأزرار اختيار وتسميات وفواصل وقوائم فرعية وفتحات نهائية. دعم كامل للوحة المفاتيح والاتجاه العربي.

يفتح DropdownMenu قائمة من مشغل: عناصر وخانات اختيار ومجموعات راديو وفواصل وقوائم فرعية. التنقل بلوحة المفاتيح ودعم ARIA من Radix.

متى تستخدمه

استخدم DropdownMenu لمجموعة إجراءات خلف مشغّل واحد: قائمة الحساب، أو إجراءات الصف في جدول، أو خيارات التصدير. ضع الإجراء الخطر آخرًا وافصله. لاختيار قيمة نموذج، استخدم Select أو Dropdown.

أبقِ القوائم في حدود اثني عشر عنصرًا واستخدم القوائم الفرعية باعتدال.

أمثلة

قائمة الحساب

عناصر مربّعات اختيار

مجموعة أزرار اختيار

قوائم فرعية وفتحات نهائية ومجموعات

الخصائص

الخصائص التي يعرّفها DropdownMenu. سمات العنصر الأصلي تمرّ كما هي.

الخاصيةالنوعالافتراضيالوصف
childrenReactNode
dirDirection
openboolean
defaultOpenboolean
onOpenChange(open: boolean) => void
modalboolean

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

يوفّر Radix نمط القائمة: يفتح المشغّل قائمة role="menu"، وتتحرّك مفاتيح الأسهم بين العناصر، وتقفز الكتابة إلى المطابق، وEnter يفعّل، وEscape يغلق ويعيد التركيز. تعرض عناصر مربّعات الاختيار وأزرار الاختيار aria-checked.

تفتح القوائم الفرعية بمفتاح السهم المتّجه مع اتجاه القراءة، فتعمل في العربية.