Yugen UI

Command

Command là bảng lệnh có ô tìm kiếm, giúp người dùng tìm và chạy lệnh hoặc điều hướng nhanh bằng bàn phím.

Xây trên cmdk: lọc và sắp xếp theo độ khớp khi gõ, mũi tên lên/xuống để chọn, Enter để chạy. Gồm CommandInput, CommandList, CommandEmpty, CommandGroup (tiêu đề nhóm), CommandItem, CommandShortcut, CommandSeparator; CommandDialog đặt bảng lệnh trong Dialog, thường mở bằng Ctrl/⌘ + K.

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 {  Command, CommandDialog, CommandInput, CommandList, CommandEmpty,  CommandGroup, CommandItem, CommandShortcut, CommandSeparator,} 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óm, phím tắt & separator

Gõ để lọc; mục disabled bị bỏ qua khi điều hướng.

CommandDialog (Ctrl/⌘ + K)

Nhấn Ctrl + K (⌘ + K trên macOS) hoặc bấm nút để mở; Esc để đóng.

Cách dùng

Nên
  • Nhóm lệnh theo ngữ cảnh với tiêu đề rõ ràng.
  • Hiện phím tắt bằng CommandShortcut để người dùng ghi nhớ.
  • Luôn có CommandEmpty để phản hồi khi không tìm thấy.
Không nên
  • Không dùng Command thay cho ô tìm kiếm nội dung trang (kết quả dài, phân trang).
  • Không đặt nhiều phím tắt mở bảng lệnh khác nhau trong cùng ứng dụng.

Props

Prop · KiểuMặc địnhMô tả
Command.labelstringMặc định: —Nhãn ẩn cho trình đọc màn hình.
Command.shouldFilter / filterboolean / (value, search, keywords?) => numberMặc định: trueTắt lọc tự động hoặc tự viết hàm chấm điểm.
Command.value / onValueChangestringMặc định: —Mục đang được chọn (controlled).
Command.loopbooleanMặc định: falseMũi tên quay vòng đầu ↔ cuối.
CommandInput.value / onValueChangestringMặc định: —Chuỗi tìm kiếm (controlled).
CommandGroup.headingReactNodeMặc định: —Tiêu đề nhóm (caption1 semibold, foreground-3).
CommandItem.value / keywords / onSelect / disabled / iconstring / string[] / (value) => void / boolean / ReactNodeMặc định: —Giá trị lọc, từ khoá phụ, xử lý chọn, vô hiệu hoá, icon.
CommandDialog.open / onOpenChange / titleboolean / (open) => void / stringMặc định: — / — / "Command palette"Trạng thái dialog; title ẩn cho trình đọc màn hình.

Messages

Chữ có sẵn của component: nhãn, aria-label, thông báo cho trình đọc màn hình.

Mặc định là tiếng Anh. Đổi qua prop messages của YugenProvider, theo namespace bên dưới; messagesVi chứa bản tiếng Việt. Xem Ngôn ngữ giao diện.

messages.command

Khoá · KiểuMặc định (tiếng Anh)messagesVi
dialogTitlestring

Tiêu đề ẩn (cho trình đọc màn hình) của CommandDialog.

Mặc định (tiếng Anh)"Command palette"messagesVi"Bảng lệnh"