Context
ContextMenu hiển thị các lệnh liên quan tới một vùng hoặc phần tử khi người dùng nhấp chuột phải.
Mở bằng chuột phải, nhấn giữ trên màn hình cảm ứng hoặc phím Menu / Shift+F10. Dùng chung style bề mặt và mục với Menu: icon, phím tắt, checkbox, radio, label, divider, submenu.
Nhấp chuột phải vào đây
Import
Cài từ npm, chép mã nguồn vào dự án bằng @yugen-ui/cli hoặc shadcn CLI, hoặc import thẳng khi làm việc trong repo này.
TSX
// npm install yugen-uiimport { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuCheckboxItem, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSub, ContextMenuSubTrigger, ContextMenuSubContent,} from "yugen-ui";Biến thể
Mỗi ô là một mẫu độc lập: hover để Copy, hoặc bấm Code để xem mã nguồn.
Nhấp chuột phải vào đây
Checkbox, radio & submenu
Cách dùng
Nên
- Chỉ chứa lệnh liên quan trực tiếp tới phần tử được nhấp.
- Đảm bảo mọi lệnh trong ContextMenu cũng truy cập được bằng cách khác (toolbar, menu).
Không nên
- Không giấu chức năng quan trọng chỉ trong ContextMenu.
- Không ghi đè menu chuột phải của trình duyệt trên vùng văn bản thông thường.
Props
| Prop · Kiểu | Mặc định | Mô tả |
|---|---|---|
| ContextMenu | Mặc định: — | Gọi khi mở / đóng. |
| ContextMenu | Mặc định: true | true: khi menu mở, trang bị khoá cuộn, bấm ra ngoài chỉ đóng menu và phần còn lại của trang ẩn khỏi trình đọc màn hình. false: trang vẫn cuộn được, bấm ra ngoài tới trang ngay. Xem Khoá cuộn. |
| ContextMenuTrigger | Mặc định: — | Gắn vào phần tử con làm vùng nhấp chuột phải. |
| ContextMenuItem | Mặc định: — | Icon cỡ 20 và phím tắt bên phải. |
| ContextMenuCheckboxItem | Mặc định: — | Bật/tắt (controlled). |
| ContextMenuRadioGroup | Mặc định: — | Lựa chọn loại trừ. |
| ContextMenuSub / ContextMenuSubTrigger / ContextMenuSubContent— | Mặc định: — | Submenu; ContextMenuSubTrigger nhận icon. |