Context Menu
منویی که با راستکلیک (یا لمس طولانی) روی یک ناحیه باز میشود و عملیات مربوط به همان ناحیه را نشان میدهد. زیرمنوها در چیدمان راستبهچپ به سمت چپ باز میشوند و فلششان هم همانجا را نشانه میرود.
این کامپوننت فعلاً برای ۱ فریمورک از ۴ فریمورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
نصب
با CLI اختصاصی dig-ui کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگیها و فایلها خودکار اضافه میشوند.
pnpm dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/context-menu.jsonnpx dig-ui@latest add https://design-system-tau-green.vercel.app/r/context-menu.jsonyarn dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/context-menu.jsonbunx --bun dig-ui@latest add https://design-system-tau-green.vercel.app/r/context-menu.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
استفاده
import {
ContextMenu,
ContextMenuContent,
ContextMenuItem,
ContextMenuTrigger,
} from "@/components/ui/context-menu"
<ContextMenu>
<ContextMenuTrigger>ناحیهٔ راستکلیک</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuItem onSelect={rename}>تغییر نام</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
ترکیب اجزا
دسترسپذیری
- منو با Shift+F10 یا کلید Menu روی صفحهکلید هم باز میشود؛ راستکلیک تنها راه نیست.
- هر عملیاتی که اینجا میگذارید باید جای دیگری هم در دسترس باشد؛ منوی راستکلیک برای کاربر لمسی و صفحهخوان راه اصلی نیست.
- ناوبری با کلیدهای بالا و پایین است و زیرمنو با کلید جهتدارِ سمت باز شدن (در راستبهچپ، کلید چپ) باز میشود؛ Escape یک سطح عقب میبرد.
- حروف تایپشده جستجوی سریع در آیتمها را فعال میکنند، پس متن آیتمها را با کلمهٔ کلیدی معنادار شروع کنید.
- برای عملیات خطرناک variant="destructive" بگذارید؛ رنگ بهتنهایی کافی نیست، متن هم باید صریح باشد («حذف همیشگی»).
مرجع API
ContextMenu
| ویژگی | نوع | پیشفرض | توضیح |
|---|---|---|---|
| onOpenChange | (open: boolean) => void | — | هنگام باز و بسته شدن صدا زده میشود؛ منوی راستکلیک prop به نام open ندارد چون موقعیتش از رویداد ماوس میآید. |
ContextMenuTrigger
| ویژگی | نوع | پیشفرض | توضیح |
|---|---|---|---|
| disabled | boolean | false | راستکلیک روی این ناحیه منو را باز نمیکند. |
| className | string | — | تریگر یک span بدون استایل است؛ اندازه و ظاهر ناحیه را خودتان بدهید. |
ContextMenuItem
| ویژگی | نوع | پیشفرض | توضیح |
|---|---|---|---|
| variant | "default" | "destructive" | "default" | حالت خطرناک، متن و آیکون را قرمز میکند. |
| inset | boolean | false | فاصلهٔ اضافی از سمت شروع، برای همترازی با آیتمهای دارای نشانگر. |
| onSelect | (event: Event) => void | — | انتخاب آیتم؛ با preventDefault میتوانید جلوی بسته شدن منو را بگیرید. |
| disabled | boolean | false | آیتم را از کلیک و ناوبری صفحهکلید خارج میکند. |
ContextMenuCheckboxItem / ContextMenuRadioItem
| ویژگی | نوع | پیشفرض | توضیح |
|---|---|---|---|
| checked / onCheckedChange | boolean / (checked: boolean) => void | — | مخصوص چکباکس؛ نشانگر تیک در سمت شروع مینشیند. |
| value | string | — | مخصوص آیتم رادیویی؛ مقدار فعال روی ContextMenuRadioGroup تعیین میشود. |
ContextMenuSub / ContextMenuShortcut
| ویژگی | نوع | پیشفرض | توضیح |
|---|---|---|---|
| ContextMenuSubTrigger | Component | — | آیتمی که زیرمنو را باز میکند؛ فلش جهتآگاه خودکار اضافه میشود. |
| ContextMenuSubContent | Component | — | محتوای زیرمنو؛ عرضش را با className بدهید. |
| ContextMenuShortcut | span | — | میانبر صفحهکلید در انتهای آیتم؛ همیشه با dir=ltr رندر میشود. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
نمونهها
Checkbox and Radio Items
همان الگوی منوی کشویی: چکباکس برای گزینههای مستقل و رادیو برای انتخاب تکی. نشانگر انتخاب در سمت شروع مینشیند.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
Disabled and Inset Items
آیتم غیرفعال کمرنگ میشود و فوکوس نمیگیرد؛ inset متن را همتراز آیتمهای دارای نشانگر میکند.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
راستکلیک تنها راه نباشد
روی لمس راستکلیک وجود ندارد و با کیبورد هم بهسختی در دسترس است. ContextMenu را همیشه بهعنوان میانبر بگذارید، نه تنها راه؛ همان عملیات باید از یک دکمهٔ آشکار هم در دسترس باشد.
همان عملیات باید از دکمهٔ «⋯» هم در دسترس باشد، وگرنه کاربر موبایل و کاربر کیبورد هیچ راهی به آن ندارند.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
آیتم غیرفعال (Disabled)
آیتم را پنهان نکنید. جای آیتمها در منو به حافظهٔ عضلانی کاربر مینشیند و پنهانشدن، فهرست را هر بار جابهجا میکند. غیرفعال با دلیل، هم جا را حفظ میکند هم توضیح میدهد.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار میآید |
|---|---|
| Checkbox and Radio Items | همان الگوی منوی کشویی: چکباکس برای گزینههای مستقل و رادیو برای انتخاب تکی |
| Disabled and Inset Items | آیتم غیرفعال کمرنگ میشود و فوکوس نمیگیرد؛ inset متن را همتراز آیتمهای دارای نشانگر میکند. |
| Nested Submenus | زیرمنو میتواند خودش زیرمنو داشته باشد؛ در راستبهچپ همه به سمت چپ باز میشوند و اگر جا نباشد برعکس. |
| راستکلیک تنها راه نباشد | هر عملیاتی که کاربر موبایل هم باید به آن برسد |
| آیتم غیرفعال (Disabled) | عملیاتی که در این لحظه شدنی نیست، مثل جایگذاری با حافظهٔ خالی |
دستورالعمل استفاده
هر عمل باید مسیر دیگری هم غیر از راستکلیک داشته باشد
انجام بده
منوی راستکلیک یک میانبر است، نه تنها راه. برای کاربر لمسی و صفحهخوان همان عمل را با یک دکمهٔ همیشهمرئی هم بگذارید.
انجام نده
اگر «حذف» فقط داخل منوی راستکلیک باشد، کاربر گوشی و کاربر صفحهخوان اصلاً راهی برای رسیدن به آن ندارند.
رنگ مخرب بههمراه متن صریح
انجام بده
variant="destructive" را با آیکون و برچسبی صریح مثل «حذف همیشگی» بگذارید تا هم رنگ و هم متن خطر را برسانند.
انجام نده
بدون variant="destructive" و با متنی مبهم مثل «حذف»، این آیتم از نظر ظاهری با بقیهٔ عملیات بیخطر فرقی ندارد.
گروهبندی با جداکننده، نه فهرست تخت
انجام بده
عملیات مرتبط را با ContextMenuSeparator از هم جدا کنید تا چشم بتواند گروهها را سریع تشخیص دهد.
انجام نده
همهٔ آیتمها پشت سر هم و بدون جداکننده، فهرست را به یک ستون یکنواخت تبدیل میکند که پیداکردن عمل مخرب در آن سخت است.