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". |
<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".
لزر الإغلاق والمشغّل أسماء متاحة، ويفتح اللوح من بداية السطر ليطابق اتجاه القراءة.