يعرض SlideoutMenu لوحة تنقل برأس وعناصر مجمعة وتذييل. يستخدم SlideoutMenu دلالات قوائم وروابط حقيقية بخلاف Drawer، وتنعكس side مع الاتجاه.
متى تستخدمه
استخدم SlideoutMenu للتنقل على مستوى التطبيق في الجوال أو في ترويسة مضغوطة: أقسام البوابة، روابط الحساب، وإجراءات اللغة وتسجيل الخروج. جمّع العناصر وأبق المستوى الأعلى قصيراً.
للتدفقات الثانوية ذات النماذج، استخدم Drawer. للتنقل الدائم في سطح المكتب، استخدم Sidebar.
الخصائص
الخصائص التي يعرفها SlideoutMenu. سمات العنصر الأصلي تمر كما هي.
<SlideoutMenu>
| الخاصية | النوع | الافتراضي | الوصف |
|---|
children | ReactNode | – | |
open | boolean | – | |
defaultOpen | boolean | – | |
onOpenChange | (open: boolean) => void | – | |
modal | boolean | – | |
<SlideoutMenuTrigger>
| الخاصية | النوع | الافتراضي | الوصف |
|---|
asChild | boolean | – | |
<SlideoutMenuClose>
| الخاصية | النوع | الافتراضي | الوصف |
|---|
asChild | boolean | – | |
<SlideoutMenuContent>
| الخاصية | النوع | الافتراضي | الوصف |
|---|
side | "start" | "end" | – | |
background | "white" | "gray" | – | |
forceMount | true | – | Used to force mounting when more control is needed. Useful when
controlling animation with React animation libraries. |
onOpenAutoFocus | (event: Event) => void | – | Event handler called when auto-focusing on open.
Can be prevented. |
onCloseAutoFocus | (event: Event) => void | – | Event handler called when auto-focusing on close.
Can be prevented. |
deferPointerDownOutside | boolean | – | When true, a 'pointerdown' event outside of the layered element will
wait for the interaction's click event before dispatching, allowing
third-party code to stop propagation of later events and cancel dismissal. |
onEscapeKeyDown | (event: KeyboardEvent) => void | – | Event handler called when the escape key is down.
Can be prevented. |
onPointerDownOutside | (event: PointerDownOutsideEvent) => void | – | Event handler called when the a pointerdown event happens outside of the DismissableLayer.
Can be prevented. |
onFocusOutside | (event: FocusOutsideEvent) => void | – | Event handler called when the focus moves outside of the DismissableLayer.
Can be prevented. |
onInteractOutside | (event: PointerDownOutsideEvent | FocusOutsideEvent) => void | – | Event handler called when an interaction happens outside the DismissableLayer.
Specifically, when a pointerdown event happens outside or focus moves outside of it.
Can be prevented. |
asChild | boolean | – | |
<SlideoutMenuHeader>
| الخاصية | النوع | الافتراضي | الوصف |
|---|
icon | react.ReactNode | – | Optional featured icon, shown in a 32px brand-tinted disc before the title. |
showCloseButton | boolean | – | Render the close (X) button. Defaults to true. |
closeLabel | string | – | Localized aria-label for the close button. Defaults to "Close", or "إغلاق" when the DgaProvider locale is Arabic. |
<SlideoutMenuTitle>
| الخاصية | النوع | الافتراضي | الوصف |
|---|
asChild | boolean | – | |
<SlideoutMenuDescription>
| الخاصية | النوع | الافتراضي | الوصف |
|---|
asChild | boolean | – | |
<SlideoutMenuGroup>
| الخاصية | النوع | الافتراضي | الوصف |
|---|
label | react.ReactNode | – | Section heading rendered above the list (SDGA "Group Label"). |
<SlideoutMenuItem>
| الخاصية | النوع | الافتراضي | الوصف |
|---|
asChild | boolean | – | Render as the child element (e.g. an <a> or router <Link>). |
icon | react.ReactNode | – | Leading 24px icon. |
trailing | react.ReactNode | – | Trailing slot - counter text, an icon button, a check, a Tag, etc. |
active | boolean | – | Marks the current page - sets aria-current="page" and the active style. |
level | 1 | 2 | – | SDGA Nav Drawer level: 2 indents the row under its parent (40px). Defaults to 1. |
expanded | boolean | – | SDGA Nav Drawer "Parent (Sub-menu)": renders a rotating chevron in the trailing slot and sets
aria-expanded. Render the level-2 rows after this item while it is expanded. |
إمكانية الوصول
تعرض اللوحة عنصر <nav> بقائمة روابط حقيقية، لذا يعرضها قارئ الشاشة معلماً للتنقل. يحمل عنصر الصفحة الحالية aria-current="page"، وتستخدم الفواصل role="separator".
لزر الإغلاق والمشغل أسماء متاحة. تفتح اللوحة من بداية السطر لتطابق اتجاه القراءة.