Dropdown Menu
فهرستی از اقدامهای مرتبط که با کلیک روی یک دکمه یا آیکون باز میشود؛ جهت باز شدن و چیدمان آیتمها با راستبهچپ هماهنگ است.
این کامپوننت فعلاً برای ۱ فریمورک از ۴ فریمورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
نصب
با CLI اختصاصی dig-ui کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگیها و فایلها خودکار اضافه میشوند.
pnpm dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/dropdown-menu.jsonnpx dig-ui@latest add https://design-system-tau-green.vercel.app/r/dropdown-menu.jsonyarn dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/dropdown-menu.jsonbunx --bun dig-ui@latest add https://design-system-tau-green.vercel.app/r/dropdown-menu.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
استفاده
import {
DropdownMenu,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuItem,
} from "@/components/ui/dropdown-menu"
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline">گزینهها</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>ویرایش</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
ترکیب اجزا
DropdownMenuTrigger دکمهٔ بازکننده است، DropdownMenuContent فهرست را در یک Portal رندر میکند و DropdownMenuItem/CheckboxItem/RadioItem/Sub برای گزینههای ساده، چندانتخابی، تکانتخابی و زیرمنو استفاده میشوند.
دسترسپذیری
- با کلیدهای جهتدار بین آیتمها حرکت میکند، با تایپ حرف به آیتم همنام میپرد و با Escape بسته میشود.
- جهت باز شدن زیرمنو (Sub) و چرخش آیکون فلش با dir="rtl" هماهنگ است، چون خودِ کامپوننت جهت را از نزدیکترین [dir] در DOM میخواند.
مرجع API
| ویژگی | نوع | پیشفرض | توضیح |
|---|---|---|---|
| DropdownMenuItem variant | "default" | "destructive" | "default" | رنگ متن آیتم؛ برای اقدامهای خطرناک از destructive استفاده کنید. |
| DropdownMenuContent align | "start" | "center" | "end" | "start" | محل قرارگیری منو نسبت به دکمهٔ فعالکننده. |
| DropdownMenuCheckboxItem checked | boolean | — | وضعیت انتخابشدهٔ آیتم چکباکسی. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
نمونهها
With Checkbox Items
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
آیتم غیرفعال (Disabled)
آیتمی که در این زمینه در دسترس نیست را غیرفعال بگذارید، نه پنهان. پنهانکردن باعث میشود کاربر فکر کند قابلیت وجود ندارد؛ غیرفعال با دلیلِ نوشتهشده میگوید هست ولی الان نه.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
فهرست خالی (Empty)
منوی خالی نباید یک کادر خالی باشد. بگویید چرا خالی است و قدم بعدی چیست.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
در حال دریافت (Loading)
وقتی آیتمها از سرور میآیند، بهجای منوی خالی جای خالیِ محتوا نشان دهید و aria-busy بگذارید تا صفحهخوان هم بفهمد منتظر است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
متن بلند (Overflow)
نامهای فارسی بلندند. یا عرض منو را ثابت کنید و آیتم را بشکنید، یا با truncate کوتاهش کنید؛ ولی نگذارید منو با محتوا پهن شود و از لبهٔ صفحه بیرون بزند.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار میآید |
|---|---|
| With Checkbox Items | منوی نمایش/مخفیکردن ستونهای یک جدول |
| آیتم غیرفعال (Disabled) | کاربری که دسترسی حذف ندارد یا مورد قفل است |
| فهرست خالی (Empty) | فیلترهای ذخیرهشده پیش از اولین ذخیره |
| در حال دریافت (Loading) | فهرستی که با باز شدن منو از سرور میآید |
| متن بلند (Overflow) | منوی عملیات ردیف جدول با عنوانهای بلند |
دستورالعمل استفاده
گروهبندی با جداکننده، نه فهرست تخت
انجام بده
آیتمهای مرتبط را با DropdownMenuSeparator از هم جدا کنید تا گروهها در نگاه اول مشخص باشند و عمل مخرب از بقیه فاصله بگیرد.
انجام نده
همهٔ آیتمها پشت سر هم و بدون جداکننده، یک ستون یکنواخت میسازد که پیداکردن گزینهٔ مورد نظر یا تشخیص عمل مخرب در آن سخت است.
رنگ مخرب فقط روی عملیات غیرقابلبازگشت
انجام بده
variant="destructive" را فقط روی آیتمی بگذارید که واقعاً غیرقابلبازگشت است، مثل حذف؛ بقیهٔ آیتمها با variant پیشفرض میمانند.
انجام نده
دادن رنگ مخرب به عملی که قابل بازگشت است (مثل لغو انتشار)، هشدار دروغین میسازد و وقتی همهجا قرمز باشد، آیتم واقعاً خطرناک دیگر برجسته نیست.
برچسب برای گروه چکباکسها
انجام بده
وقتی چند DropdownMenuCheckboxItem کنار هم میآیند، با DropdownMenuLabel بگویید این گروه دربارهٔ چیست.
انجام نده
بدون برچسب، کاربر باید حدس بزند این چکباکسها مربوط به کدام تنظیم یا گروهاند.