Drawer
پنلی که از لبهٔ صفحه بالا میآید و با کشیدن بسته میشود؛ حس اپلیکیشن بومی موبایل را میدهد. برای صفحههای کوچک جایگزین دیالوگ است و برای دسکتاپ معمولاً دیالوگ یا کشو (Sheet) مناسبتر است.
این کامپوننت فعلاً برای ۱ فریمورک از ۴ فریمورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
نصب
با CLI اختصاصی dig-ui کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگیها و فایلها خودکار اضافه میشوند.
pnpm dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/drawer.jsonnpx dig-ui@latest add https://design-system-tau-green.vercel.app/r/drawer.jsonyarn dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/drawer.jsonbunx --bun dig-ui@latest add https://design-system-tau-green.vercel.app/r/drawer.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
استفاده
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from "@/components/ui/drawer"
<Drawer>
<DrawerTrigger asChild>
<Button>باز کردن</Button>
</DrawerTrigger>
<DrawerContent>
<DrawerHeader>
<DrawerTitle>عنوان</DrawerTitle>
<DrawerDescription>توضیح</DrawerDescription>
</DrawerHeader>
</DrawerContent>
</Drawer>این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
ترکیب اجزا
دسترسپذیری
- فوکوس هنگام باز شدن داخل کشو قفل میشود و با بسته شدن به تریگر برمیگردد.
- DrawerTitle الزامی است؛ بدون آن صفحهخوان نمیداند این پنل چیست. اگر عنوان دیداری نمیخواهید، با کلاس sr-only پنهانش کنید.
- Escape و کلیک بیرون کشو را میبندند؛ برای فرمهای حساس با dismissible={false} جلوی بسته شدن ناخواسته را بگیرید.
- پسزمینه هنگام باز بودن کشو قفل اسکرول میشود تا محتوای زیرین جابهجا نشود.
- روی دسکتاپ بهجای کشو از دیالوگ استفاده کنید.
مرجع API
Drawer
| ویژگی | نوع | پیشفرض | توضیح |
|---|---|---|---|
| open / onOpenChange | boolean / (open: boolean) => void | — | مدیریت کنترلشدهٔ باز و بسته بودن. |
| direction | "top" | "bottom" | "left" | "right" | "bottom" | لبهای که کشو از آن میآید؛ مقدارها فیزیکیاند نه منطقی. |
| dismissible | boolean | true | با false کلیک بیرون و Escape کشو را نمیبندد؛ فقط دکمهها. |
DrawerContent
| ویژگی | نوع | پیشفرض | توضیح |
|---|---|---|---|
| children | React.ReactNode | — | عرض را با یک div داخلی (mx-auto max-w-sm) محدود کنید تا روی دسکتاپ کش نیاید. |
| className | string | — | کلاسهای پایه بر اساس prop مقدار direction انتخاب میشوند؛ کلاس شما روی همانها مینشیند. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
نمونهها
Direction
کشو میتواند از هر چهار لبه بیاید. مقدارها فیزیکیاند، پس برای لبهٔ پایانی در راستبهچپ left بدهید.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
Confirmation
الگوی رایج موبایل: تأیید یک عمل حساس بدون بردن کاربر به صفحهٔ دیگر.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
Non-dismissible
برای فرمی که نباید با کشیدن اتفاقی بسته شود، dismissible را false بگذارید؛ آنوقت بستن فقط با دکمه ممکن است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
در حال ارسال (Loading)
کشو با کشیدن به پایین بسته میشود، پس وسط درخواست این را ببندید. تا معلومشدن نتیجه باز بماند و دکمهها قفل شوند.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
محتوای بلند (Overflow)
سقف ارتفاع بگذارید و فقط بدنه را اسکرول کنید. اگر کل کشو بلند شود، دستهٔ کشیدن از دسترس خارج میشود و کاربر موبایل راهی برای بستنش ندارد.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار میآید |
|---|---|
| Direction | کشو میتواند از هر چهار لبه بیاید |
| Confirmation | الگوی رایج موبایل: تأیید یک عمل حساس بدون بردن کاربر به صفحهٔ دیگر. |
| Non-dismissible | برای فرمی که نباید با کشیدن اتفاقی بسته شود، dismissible را false بگذارید؛ آنوقت بستن فقط با دکمه ممکن است. |
| در حال ارسال (Loading) | فرم کوتاهی که از کشوی موبایل ثبت میشود |
| محتوای بلند (Overflow) | متن شرایط یا فهرستی که از ارتفاع صفحه بیشتر است |
دستورالعمل استفاده
عنوان همیشه لازم است
انجام بده
DrawerTitle را حتی وقتی عنوان دیداری نمیخواهید بگذارید و با کلاس sr-only پنهانش کنید؛ بدون آن صفحهخوان نمیداند این پنل چیست.
انجام نده
کشوی بدون عنوان برای کاربر صفحهخوان یک پنل بینام است؛ متن آزاد داخل کشو جای عنوان را نمیگیرد.
محدود کردن عرض محتوا
انجام بده
محتوا را در یک ظرف mx-auto با عرض بیشینه بگذارید؛ روی دسکتاپ خوانا میماند و روی موبایل تمامعرض است.
انجام نده
محتوای تمامعرض روی نمایشگر بزرگ، فرم را به یک نوار کشیده تبدیل میکند و فاصلهٔ برچسب تا فیلد بیدلیل زیاد میشود.