Yugen UI

Menu

Menu hiển thị danh sách lệnh hoặc lựa chọn khi người dùng tương tác với một nút.

Hỗ trợ icon, phím tắt (secondaryContent), nhóm có tiêu đề, divider, radio, checkbox và submenu. Điều hướng bằng phím mũi tên, Enter, Esc.

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 {  Menu, MenuTrigger, MenuPopover, MenuItem, MenuDivider, MenuGroupHeader,  MenuRadioGroup, MenuItemRadio, MenuItemCheckbox, MenuSub, MenuSubTrigger, MenuSubPopover,} 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.

Radio & checkbox

Lựa chọn loại trừ (radio) và bật/tắt (checkbox) ngay trong menu.

Submenu

Nhóm lệnh phụ; chỉ lồng tối đa 1 cấp.

Cách dùng

Nên
  • Nhãn là động từ ngắn, viết hoa chữ đầu.
  • Nhóm lệnh liên quan bằng MenuDivider / MenuGroupHeader.
  • Đặt lệnh phá huỷ ở cuối, tách bằng divider.
Không nên
  • Không quá ~10 mục trong một menu.
  • Không lồng submenu quá 1 cấp.
  • Không đặt nội dung tương tác phức tạp (form) trong menu — dùng Popover.

Props

Prop · KiểuMặc địnhMô tả
Menu.modalbooleanMặc định: truetrue: 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.
MenuItem.iconReactNodeMặc định: —Icon cỡ 20.
MenuItem.secondaryContentReactNodeMặc định: —Phím tắt / thông tin phụ ở cuối item. MenuItemCheckbox và MenuItemRadio cũng có.
MenuPopover.align"start" | "center" | "end"Mặc định: "start"Căn với trigger.
MenuPopover.material"glass" | "glass-clear"Mặc định: —Yugen Labs — menu bằng glass, thường mở từ thanh glass, mọc ra từ nút mở. MenuSubPopover cũng có.
MenuRadioGroup.value / onValueChangestringMặc định: —Lựa chọn radio.
MenuItemCheckbox.checked / defaultCheckedbooleanMặc định: —Bật/tắt.