Yugen UI

Toolbar

Toolbar gom các lệnh thường dùng thành một thanh ngang hoặc dọc, điều hướng bằng phím mũi tên.

Gồm ToolbarButton (subtle), ToolbarToggleButton, ToolbarDivider và ToolbarGroup. Roving focus: Tab vào toolbar một lần, mũi tên / Home / End di chuyển giữa các mục (vòng tròn). Ba kích thước small, medium, large ứng với Button.

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 { Toolbar, ToolbarButton, ToolbarToggleButton, ToolbarDivider, ToolbarGroup } 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 & menu tràn

ToolbarGroup chia hai đầu; lệnh ít dùng đưa vào Menu.

Kích thước

small và large (medium là mặc định).

Dọc

orientation="vertical" — dùng phím mũi tên lên / xuống.

Cách dùng

Nên
  • Luôn đặt aria-label cho Toolbar và cho mọi nút chỉ có icon.
  • Nhóm lệnh liên quan bằng ToolbarDivider / ToolbarGroup.
  • Đưa lệnh ít dùng vào menu “Thêm” ở cuối thanh.
Không nên
  • Không đặt ô nhập dài hay nội dung phức tạp vào toolbar.
  • Không dùng appearance primary cho nhiều nút trong cùng thanh.

Props

Prop · KiểuMặc địnhMô tả
size"small" | "medium" | "large"Mặc định: "medium"Áp dụng cho mọi ToolbarButton bên trong.
orientation"horizontal" | "vertical"Mặc định: "horizontal"Hướng thanh và phím mũi tên.
material"glass" | "glass-clear"Mặc định: —Yugen Labs — thanh nổi bằng glass, bo tròn hai đầu; nút bên trong bo đồng tâm. glass-clear dùng trên ảnh, kèm glass-scrim.
aria-labelstringMặc định: —Tên của toolbar cho trình đọc màn hình.
ToolbarButtonButtonProps & { vertical?: boolean }Mặc định: —Button mặc định appearance="subtle"; vertical đặt icon trên chữ.
ToolbarToggleButtonToggleButtonPropsMặc định: —ToggleButton subtle, có checked / onCheckedChange.
ToolbarDivider / ToolbarGroupHTMLAttributesMặc định: —Vạch chia 1px stroke-2 / nhóm mục.