لوح جانبي

Drawer

لوح في React ينزلق من بداية السطر أو نهايته أو من الأسفل، للإعدادات، لوحات التفاصيل، ونماذج التصفية. يدير التركيز كما يديره Modal، وتراعي جوانبه الاتجاه من اليمين إلى اليسار.

فتح في Storybook ↗

ينزلق Drawer من حافة الشاشة بسلوك التركيز ومفتاح Escape نفسه في Modal. تعتمد الخاصية side على الاتجاه المنطقي، لذا تنعكس start وend مع اتجاه الصفحة.

متى تستخدمه

استخدم Drawer للتدفقات الثانوية التي تحتاج إلى مساحة أكبر من Modal: تحرير الإعدادات، أو عرض تفاصيل سجل، أو نموذج تصفية. استخدم اللوح السفلي في الجوال للمنتقيات القصيرة.

تتبادل القيمتان start وend موضعيهما في الاتجاه من اليمين إلى اليسار لأن الخاصية side منطقية. أبق الصفحة خلف اللوح ظاهرة ليحتفظ المستخدم بسياقه.

أمثلة

لوح الإعدادات

لوح سفلي

نموذج تصفية

الخصائص

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

<Drawer>

الخاصية	النوع	الافتراضي	الوصف
`children`	`ReactNode`
`open`	`boolean`
`defaultOpen`	`boolean`
`onOpenChange`	`(open: boolean) => void`
`modal`	`boolean`

<DrawerTrigger>

الخاصية	النوع	الافتراضي	الوصف
`asChild`	`boolean`

<DrawerClose>

الخاصية	النوع	الافتراضي	الوصف
`asChild`	`boolean`

<DrawerContent>

الخاصية	النوع	الوصف
`side`	`"start" \| "end" \| "top" \| "bottom"`
`size`	`"sm" \| "md" \| "lg" \| "full"`
`showCloseButton`	`boolean`	Show the corner X close button. Defaults to `true`.
`closeLabel`	`string`	Localized aria-label for the close button. Defaults to `"Close"`, or `"إغلاق"` when the DgaProvider locale is Arabic.
`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`

<DrawerTitle>

الخاصية	النوع	الافتراضي	الوصف
`asChild`	`boolean`

<DrawerDescription>

الخاصية	النوع	الافتراضي	الوصف
`asChild`	`boolean`

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

يعتمد Drawer على أساس الحوار نفسه الذي يعتمد عليه Modal: يبقى التركيز محصوراً داخله، ويغلقه Escape، ثم يعود التركيز إلى المشغل. تمنح أجزاء العنوان والوصف اللوح اسمه المتاح.

لزر الإغلاق اسم متاح. ويتبع اللوح اتجاه الصفحة، مما يجعله ينزلق من الحافة المتوقعة.