Drawer

التثبيتنسخ رابط العنوان

الاستخدامنسخ رابط العنوان

import { Button } from "@/components/ui/button";
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer";

export function FilterDrawer() {
  return (
    <Drawer side="start">
      <DrawerTrigger render={<Button variant="outline" />}>التصفية</DrawerTrigger>
      <DrawerContent closeLabel="إغلاق">
        <DrawerHeader>
          <DrawerTitle>التصفية</DrawerTitle>
          <DrawerDescription>اختر ما يظهر في قائمة الطلبات.</DrawerDescription>
        </DrawerHeader>
        <DrawerFooter>
          <DrawerClose render={<Button />}>تطبيق</DrawerClose>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  );
}

استخدم Drawer لمحتوى يقع بجانب الصفحة ولا ينبغي أن يغادرها: قائمة تنقل على الجوال أو مرشحات أو لوحة تفاصيل. ولقرار لا بد من الإجابة عنه استخدم Dialog. قيمة side هي start أو end أو top أو bottom. وتتبع start وend اتجاه الصفحة، فاللوحة start على اليسار في الإنجليزية وعلى اليمين في العربية، ويغلقها السحب نحو تلك الحافة. وأعطها DrawerTitle.

البنيةنسخ رابط العنوان

• الخلفية: تعتّم الصفحة وتعطّلها.
• المحتوى: اللوحة، بعرض 346px على الجانبين وعرض كامل في الأعلى أو الأسفل. بيضاء (background-menu) أو رمادية (neutral-100).
• الترويسة: DrawerTitle وDrawerDescription.
• التذييل: DrawerFooter، مدفوع إلى الأسفل، والإجراءات في جهة النهاية.
• زر الإغلاق: في الزاوية، في جهة النهاية.

أمثلةنسخ رابط العنوان

الجهاتنسخ رابط العنوان

الجهات الأربع. افتح الأولى في كل اتجاه وقارن موضع ظهورها.

التنقلنسخ رابط العنوان

النمط الرمادي، ولوحة start فيها قائمة روابط. والروابط أزرار عادية تعرض <a>.

مُدار، دون زر في الزاويةنسخ رابط العنوان

مرّر open وonOpenChange لفتح الدرج من شيفرتك، واضبط showCloseButton={false} حين يحمل التذييل إجراء إغلاق أصلًا. ويظل Escape والنقر على الصفحة خلفه يغلقانه.

RTLنسخ رابط العنوان

تتبادل start وend: فاللوحة نفسها تنزلق من اليمين في الصفحات العربية وحدّها على اليسار، ويغلقها السحب نحو اليمين. وتنعكس حركة الانزلاق معها.

إمكانية الوصولنسخ رابط العنوان

• مبنية على Base UI Drawer: نافذة معتمة مع aria-labelledby وaria-describedby. والصفحة خلفها معطّلة وتمريرها مقفل.
• يُحبس التركيز داخلها ويعود إلى الزر عند الإغلاق. والسحب وسيلة إضافية للإغلاق لا الوحيدة.
• لزر الإغلاق اسم (closeLabel). والنصوص بنسبة 4.5:1 والأيقونات 3:1 أو أفضل على السطحين الأبيض والرمادي، فاتحًا وداكنًا.
• ومع تقليل الحركة تظهر اللوحة دون انزلاق.

مرجع APIنسخ رابط العنوان

الاختلافات عن DGAنسخ رابط العنوان

• Slideout Menu في Figma لوحة بعرض 346px جزء من التخطيط. أما هذه فلوحة معتمة: حبس تركيز وEscape وسحب. أما اللوحة الجانبية في تخطيطك فقائمة تنقل لا هذه.
• الحد المجاور للصفحة منطقي (border-e أو border-s). أما border-right واتجاه الانزلاق في DGA فماديان، فيكونان في الجهة الخاطئة بالعربية.

التبايننسخ رابط العنوان