کشو (Drawer)
یک پنل کشویی که از کنار صفحه نمایش داده می‌شود
معرفی
کامپوننت Drawer یک پنل کشویی است که معمولاً برای نمایش منوها، فرم‌ها یا محتوای اضافی استفاده می‌شود.
چه زمانی استفاده کنیم:
- برای پنل‌های موبایل که از پایین صفحه باز می‌شوند (bottom sheet)
- برای منوهای ناوبری در موبایل
- وقتی کاربر باید بتواند با swipe پنل را ببندد
چه زمانی استفاده نکنیم:
- برای dialog های کوچک روی desktop — از
Dialogاستفاده کنید - برای فرم‌های با تعامل کمپلکس — از
Dialogاستفاده کنید - برای محتوایی که باید در overlay کامل باشد — از
Dialogاستفاده کنید
زمین بازی
با تغییر تنظیمات زیر، پیش‌نمایش زنده را مشاهده کنید.
import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, Button, DrawerDescription, DrawerFooter } from '@partodata/ui'
<Drawer>
<DrawerTrigger asChild>
<Button type="default" size="sm">باز کردن کشو</Button>
</DrawerTrigger>
<DrawerContent>
<DrawerHeader>
<DrawerTitle>عنوان کشو</DrawerTitle>
<DrawerDescription>توضیحات کوتاه درباره محتوا.</DrawerDescription>
</DrawerHeader>
<DrawerFooter>
<Button type="primary" size="sm">تأیید</Button>
</DrawerFooter>
</DrawerContent>
</Drawer>استفاده
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from '@partodata/ui'
export default function MyComponent() {
return (
<Drawer>
<DrawerTrigger>باز کردن</DrawerTrigger>
<DrawerContent>
<DrawerHeader>
<DrawerTitle>عنوان</DrawerTitle>
<DrawerDescription>توضیحات در اینجا</DrawerDescription>
</DrawerHeader>
<div className="p-4">محتوای اصلی</div>
<DrawerFooter>
<DrawerClose>بستن</DrawerClose>
</DrawerFooter>
</DrawerContent>
</Drawer>
)
}حالت‌ها و انواع
پیش‌فرض
ساختار کامپوننت‌ها
<Drawer>
<DrawerTrigger asChild>
<Button>باز کردن</Button>
</DrawerTrigger>
<DrawerContent>
<DrawerHeader>
<DrawerTitle>عنوان</DrawerTitle>
<DrawerDescription>توضیحات</DrawerDescription>
</DrawerHeader>
{/* محتوا */}
<DrawerFooter>
<Button variant="primary">تأیید</Button>
<DrawerClose asChild>
<Button variant="outline">لغو</Button>
</DrawerClose>
</DrawerFooter>
</DrawerContent>
</Drawer>جهت‌های مختلف
از prop منطقی side استفاده کنید: end لبه‌ی انتهای جهت خواندن است (در RTL سمت چپ و در LTR سمت راست) و start لبه‌ی
ابتدای آن. top و bottom روی محور عمودی‌اند و با جهت صفحه تغییر نمی‌کنند.
از پایین (پیش‌فرض)
<Drawer side="bottom">{/* محتوا */}</Drawer>از لبه‌ی ابتدایی (در RTL: راست)
<Drawer side="start">{/* محتوا */}</Drawer>از لبه‌ی انتهایی (در RTL: چپ)
<Drawer side="end">{/* محتوا */}</Drawer>از بالا
<Drawer side="top">{/* محتوا */}</Drawer>prop فیزیکی direction هنوز کار می‌کند، اما side را ترجیح دهید
direction همان prop کتابخانه‌ی vaul است و همیشه فیزیکی می‌ماند (left واقعاً یعنی چپ صفحه). تا نسخه‌ی 3.0.0
کلاس‌های موقعیت‌دهی کامپوننت منطقی بودند در حالی که انیمیشن، نوار سرریز و محاسبات کشیدن در vaul فیزیکی‌اند؛ نتیجه این
بود که در یک صفحه‌ی RTL، direction="right" پنل را روی لبه‌ی چپ می‌کشید ولی آن را از سمت راست وارد می‌کرد و برای بستن
هم به سمت اشتباه کشیده می‌شد. حالا direction دقیقاً همان لبه‌ی فیزیکی را می‌دهد و side معادل منطقی آن است.
کنترل شده
const [open, setOpen] = useState(false)
;<Drawer open={open} onOpenChange={setOpen}>
{/* محتوا */}
</Drawer>راهنمای استفاده
بکنید
- از Drawer برای تجربه موبایل استفاده کنید و در desktop از
SheetیاDialogاستفاده کنید - همیشهDrawerTitleوDrawerDescriptionرا برای دسترسی‌پذیری ارائه دهید - ازsideمناسب بر اساس نوع محتوا استفاده کنید (bottom برای منو، start/end برای پنل کناری)
نکنید
- Drawer را در desktop به‌عنوان جایگزین Dialog استفاده نکنید - محتوای بسیار بلند را بدون اسکرول داخلی در Drawer قرار
ندهید - از Drawer برای تأیید اعمال مخرب استفاده نکنید — از
AlertDialogاستفاده کنید
جدول ویژگی‌ها
Drawer
دسترسی‌پذیری
- قابل کشیدن (swipe/drag) برای بستن
- اسکرول صفحه در هنگام باز بودن قفل می‌شود
- از
role="dialog"وaria-modalاستفاده می‌شود - با Escape بسته می‌شود
- focus trap برای پیمایش کیبورد