روکشDrawer Menu

کشو

پنل کشویی از کنار صفحه

پیش‌فرض

کشو از سمت راست (برای RTL)

{/* استفاده از side="right" برای RTL */}
<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">
      <Menu className="h-4 w-4 me-2" />
      منو
    </Button>
  </SheetTrigger>
  <SheetContent side="right">
    <SheetHeader>
      <SheetTitle>عنوان</SheetTitle>
      <SheetDescription>
        محل قرارگیری محتوا که می‌تواند با کامپوننت جایگزین شود.
      </SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>

نصب دستی

وابستگی‌ها

برای استفاده از Drawer Menu، باید این بسته‌ها را نصب کنید:

npm install @radix-ui/react-dialog

کد زیر را می‌توانید در پروژه خود کپی کنید تا Drawer Menu را به صورت دستی اضافه کنید:

نمونه‌های بیشتر

از پایین

کشو از پایین صفحه (مناسب موبایل)

با ناوبری

کشو همراه با منوی ناوبری