البناء · جديد

الدرج السفلي

لوحة تنزلق من أسفل شاشة الجوال لمهمة قصيرة أو قائمة إجراءات، في متناول الإبهام، والصفحة ظاهرة خلفها. تُعرف أيضًا باللوحة السفلية (Bottom sheet).

المعاينة

المعكوسة هي المحتوى الإنجليزي نفسه من اليمين إلى اليسار، لتفصل خطأ الاتجاه عن خطأ الترجمة.

التثبيت

قريبًايُفتح التثبيت من السجل مع الإطلاق. حتى ذلك الحين، هذا هو الأمر الذي ستستخدمه.

npx shadcn@latest add @ritla/drawer

الاعتماديات التي يضيفها: @base-ui/react, @phosphor-icons/react

الاستخدام

import { Drawer, DrawerBody, DrawerContent, DrawerHeader, DrawerMenu, DrawerMenuItem, DrawerTrigger } from "@/components/ui/drawer";

<Drawer>
  <DrawerTrigger render={<Button />}>Move email</DrawerTrigger>
  <DrawerContent>
    <DrawerHeader title="Move to" />
    <DrawerBody>
      <DrawerMenu>
        <DrawerMenuItem leadingIcon={TrayIcon} onSelect={moveToInbox}>Inbox</DrawerMenuItem>
      </DrawerMenu>
    </DrawerBody>
  </DrawerContent>
</Drawer>

أمثلة

مهمة قصيرة

المحتوى مهمة واحدة (تصفية) تنتهي بزر ثانوي ثم أساسي، والأساسي في نهاية السطر. ولأنها تحمل اختيارات، لا تُغلق بلمس الخلفية (disablePointerDismissal).

قائمة طويلة

تتوقف اللوحة عند 90% من الشاشة ويُمرَّر المحتوى، ويبقى العنوان في مكانه. والعنوان الفرعي بجانب العنوان.

أزرار متراصة

‏stacking="vertical" للعناوين الطويلة، والأساسي في الأعلى. الأزرار تبقى بترتيب القراءة: الثانوي ثم الأساسي.

مرجع الخصائص

Drawer

الخاصية	النوع	الافتراضي	الوصف
`open / defaultOpen / onOpenChange`	`boolean`		للتحكم في الفتح.
`disablePointerDismissal`	`boolean`	`false`	لا تُغلق بلمس الخلفية (للوحات التي تحمل مدخلات).

DrawerContent

الخاصية	النوع	الافتراضي	الوصف
`handle`	`boolean`	`true`	مقبض السحب، للإشارة فقط.
`initialFocus`	`RefObject<HTMLElement>`		أين يبدأ التركيز.

DrawerHeader

الخاصية	النوع	الافتراضي	الوصف
`title`	`ReactNode`		خاصية Title: الغرض من اللوحة، وهو اسمها.
`subtitle`	`ReactNode`		خاصية Subtitle بجانب العنوان.
`description`	`ReactNode`		خاصية Description: سطر قصير للسياق.
`badge`	`ReactNode`		خاصية Show badge: عدد أو نص قصير.
`closeButton / closeLabel`	`boolean / string`	`true / "Close"`	زر الإغلاق واسمه. أبقه دائمًا.

DrawerMenuItem

الخاصية	النوع	الوصف
`children`	`ReactNode`	نص الصف.
`leadingIcon / description / trailing`	`IconComponent / ReactNode / ReactNode`	أيقونة وسطر ثانٍ وعدد في النهاية.
`onSelect / disabled`	`() => void / boolean`	يعمل عند اللمس ثم تُغلق اللوحة.

DrawerActions / DrawerBody / DrawerMenuLabel / DrawerClose

الخاصية	النوع	الافتراضي	الوصف
`stacking`	`"horizontal" \| "vertical"`	`"horizontal"`	خاصية Stacking للأزرار.
`DrawerBody`	`div`		المحتوى، ويُمرَّر عند الحاجة.
`DrawerMenuLabel`	`h3`		عنوان مجموعة صفوف.
`DrawerClose render`	`ReactElement`		زر يغلق اللوحة.

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

لوحة المفاتيح

المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.

المفتاح	ما يفعله
`TabShift+Tab`	بين عناصر اللوحة فقط.
`Esc`	يغلقها ويعيد التركيز إلى الزر الذي فتحها.

ARIA

اللوحة dialog مع aria-modal، والعنوان اسمها.
السحب للأسفل ليس الطريق الوحيد للإغلاق: زر الإغلاق («إغلاق») وEsc ولمس الخلفية.
مقبض السحب زخرفي، والصفوف والأزرار 48 بكسل على الأقل.

ملاحظات العربية والاتجاه

ينعكس

العنوان وأيقونات القائمة على اليمين، وزر الإغلاق على اليسار.
الزر الأساسي على اليسار في نهاية السطر، والثانوي على اليمين.

لا ينعكس

الحركة عمودية: تنزلق للأعلى وتُسحب للأسفل في اللغتين.

الأرقام: الأعداد في الصفوف تتبع إعداد الأرقام؛ نسّقها بـ formatNumber.
الخط العربي: العنوان label-14 Medium، والفرعي والوصف label-12، والصفوف كصفوف القائمة.
النص ثنائي الاتجاه: أسماء بلغة أخرى داخل الصفوف تأخذ dir="auto".

كل المكونات ›