قائمة إجراءات
DropdownMenuقائمة إجراءات منسدلة في React مبنية على Radix، مع عناصر، مربعات اختيار، أزرار اختيار، تسميات، فواصل، قوائم فرعية، وفتحات نهائية. تدعم لوحة المفاتيح والاتجاه من اليمين إلى اليسار بالكامل.
يفتح DropdownMenu قائمة من مشغل، وتضم القائمة عناصر، مربعات اختيار، مجموعات أزرار اختيار، فواصل، وقوائم فرعية. يوفر Radix التنقل بلوحة المفاتيح ودعم ARIA.
متى تستخدمه
استخدم DropdownMenu لمجموعة إجراءات خلف مشغل واحد: قائمة الحساب، أو إجراءات الصف في جدول، أو خيارات التصدير. ضع الإجراء الخطير آخر القائمة وافصله عن غيره. لاختيار قيمة في نموذج، استخدم Select أو Dropdown.
أبق القائمة في حدود 12 عنصر، واستخدم القوائم الفرعية باعتدال.
أمثلة
الخصائص
الخصائص التي يعرفها DropdownMenu. سمات العنصر الأصلي تمر كما هي.
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
children | ReactNode | ||
dir | Direction | ||
open | boolean | ||
defaultOpen | boolean | ||
onOpenChange | (open: boolean) => void | ||
modal | boolean |
إمكانية الوصول
يوفر Radix نمط القائمة. يفتح المشغل قائمة role="menu" تدعم هذه المفاتيح: الأسهم للتنقل بين العناصر، الكتابة للقفز إلى العنصر المطابق، Enter للتفعيل، وEscape للإغلاق وإعادة التركيز. تعرض عناصر مربعات الاختيار وأزرار الاختيار aria-checked.
تفتح القوائم الفرعية بمفتاح السهم الذي يشير إلى اتجاه القراءة، مما يجعلها تعمل في الاتجاه من اليمين إلى اليسار.