Yugen UI

List

List hiển thị một chuỗi mục liên quan theo chiều dọc, có thể điều hướng bằng bàn phím và chọn một hoặc nhiều mục.

Mỗi ListItem gồm media (Avatar / icon), tiêu đề, mô tả và vùng actions. selectionMode bật chọn mục (multiselect hiện Checkbox); navigationMode="composite" cho phép → / ← để vào / ra các nút bên trong item.
  • Nguyễn Văn AnKỹ sư phần mềm
  • Trần Thị BìnhNhà thiết kế
  • Lê Hoàng CườngQuản lý sản phẩm
  • Hoàng Thu HàKỹ sư kiểm thử
1 đã chọn · dùng ↑ ↓ và Space để chọn

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 { List, ListItem } 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.

  • Báo cáo quý 3.docxSửa 2 giờ trước
  • Ảnh bìa.pngSửa hôm qua
  • Hợp đồng.pdfSửa 3 ngày trước

Cơ bản

List tĩnh với icon, tiêu đề và mô tả.

  • Hôm nay
  • 7 ngày qua
  • 30 ngày qua

Chọn một

selectionMode="single": mục chọn có nền tint brand và dấu tick.

  • Trần Thị BìnhGửi bạn bản thiết kế mới cho trang chủ, xem giúp mình nhé.
  • Lê Hoàng CườngLịch họp sprint chuyển sang 10:00 thứ Năm.

Outline & actions

appearance="outline" biến mỗi item thành thẻ; composite: → vào nút, ← / Esc quay lại item.

Cách dùng

Nên
  • Đặt aria-label cho List; value ổn định cho từng ListItem khi có selection.
  • Dùng composite khi item chứa nút / menu riêng.
  • Giữ mỗi item một hành động chính rõ ràng.
Không nên
  • Không lồng List trong ListItem — dùng Tree cho dữ liệu phân cấp.
  • Không chỉ dùng màu để báo mục đã chọn (đã có checkbox / dấu tick).
  • Không dùng List cho dữ liệu nhiều cột — dùng Table.

Props

Prop · KiểuMặc địnhMô tả
selectionMode"none" | "single" | "multiselect"Mặc định: "none"Chế độ chọn; multiselect hiện Checkbox.
selectedItems / defaultSelectedItemsstring[]Mặc định: —Danh sách value đang chọn (controlled / uncontrolled).
onSelectionChange(selectedItems: string[]) => voidMặc định: —Gọi khi chọn / bỏ chọn.
navigationMode"items" | "composite"Mặc định: items khi có selectionĐiều hướng bằng phím mũi tên (roving tabindex).
appearance"default" | "outline"Mặc định: "default"outline: mỗi item là thẻ có viền, bo rounded-xlarge. Tên cũ variant đã lỗi thời (bỏ ở 1.0).
ListItem.media / title / description / actionsReactNodeMặc định: —Các vùng nội dung của item.
ListItem.onAction(event) => voidMặc định: —Hành động chính khi click / Enter.
ListItem.value / disabledstring / booleanMặc định: —Định danh và trạng thái vô hiệu.