روکشBottom Sheet

صفحه پایین

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

پیش‌فرض

صفحه پایین ساده

<Sheet>
  <SheetTrigger asChild>
    <Button>باز کردن</Button>
  </SheetTrigger>
  <SheetContent side="bottom" className="h-auto">
    <SheetHeader>
      <SheetTitle>عنوان</SheetTitle>
    </SheetHeader>
    <div className="py-4">
      <p className="text-sm text-muted-foreground">
        محل قرارگیری محتوا که می‌تواند با کامپوننت جایگزین شود.
      </p>
    </div>
  </SheetContent>
</Sheet>

نصب دستی

وابستگی‌ها

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

npm install @radix-ui/react-dialog

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

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

با عملیات

صفحه پایین همراه با دکمه‌های عمل

با دستگیره

صفحه پایین با دستگیره کشیدن