روکش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 را به صورت دستی اضافه کنید:
نمونههای بیشتر
با عملیات
صفحه پایین همراه با دکمههای عمل
با دستگیره
صفحه پایین با دستگیره کشیدن