Yugen UI

Tree

Tree hiển thị dữ liệu phân cấp dạng nhánh có thể mở / đóng, như cây thư mục hay danh mục điều hướng.

TreeItem là nhánh (branch) hoặc lá (leaf); đặt một Tree bên trong nhánh để tạo cấp con, thụt lề tự động theo --tree-level. Bàn phím: ↑ ↓ di chuyển, → mở / vào con, ← đóng / về cha, Enter chọn.
src
components3
Button.tsx
Card.tsx
Tree.tsx
main.tsx
package.json

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 { Tree, TreeItem, TreeItemLayout } 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.

Tài liệu
Kế hoạch.docx
Hợp đồng.pdf
Ảnh bìa.png

Kích thước small

Hàng cao 24px, chữ caption1, icon 16px.

Nhóm thiết kế
Chung
Thông báo

Transparent & actions

appearance="transparent" bỏ nền hover; actions chỉ hiện khi hover hoặc focus.

Hộp thư đến
Công việc
Gia đình
Đã gửi
Lưu trữ
Đang chọn: work

Chọn mục

selectionMode="single": click hoặc Enter để chọn; mục chọn có tint brand và vạch chỉ báo.

Cách dùng

Nên
  • Đặt aria-label cho Tree và value ổn định cho TreeItem cần điều khiển.
  • Dùng icon trước (Folder / Document) để phân biệt loại mục.
  • Giữ độ sâu tối đa 3–4 cấp để dễ quét.
Không nên
  • Không dùng Tree cho danh sách phẳng — dùng List.
  • Không đặt hành động quan trọng chỉ trong actions ẩn; cung cấp thêm cách khác.
  • Không dùng màu brand cho icon thư mục.

Props

Prop · KiểuMặc địnhMô tả
Tree.size"small" | "medium"Mặc định: "medium"Hàng cao 24 / 32px.
Tree.appearance"subtle" | "transparent"Mặc định: "subtle"Nền khi hover.
Tree.openItems / defaultOpenItems / onOpenChangestring[] / (openItems, { value, open }) => voidMặc định: —Các nhánh đang mở.
Tree.selectionMode / selectedValue / onSelectionChange"none" | "single" / string / (value) => voidMặc định: "none"Chọn một mục (aria-selected).
TreeItem.itemType"branch" | "leaf"Mặc định: —Nhánh có subtree hoặc mục lá.
TreeItem.valuestringMặc định: —Định danh cho openItems / selectedValue.
TreeItemLayout.iconBefore / iconAfter / aside / actions / expandIconReactNodeMặc định: —Các vùng của hàng; actions chỉ hiện khi hover / focus.