Yugen UI

Accordion

Accordion xếp nội dung thành các mục có thể mở rộng / thu gọn để giảm tải thông tin trên trang.

Mở một mục (type="single", có thể collapsible) hoặc nhiều mục (type="multiple"). Ba appearance: flush (liền mạch, mặc định), separated (mỗi mục là một thẻ bo 8px, shadow-2) và outline (khung viền chung, vạch chia giữa các mục). Header có thể kèm icon và dòng mô tả; Accordion lồng trong panel tự thừa hưởng cỡ của cha và có đường dẫn dọc thể hiện cấp bậc. Panel chuyển động chiều cao mượt, tôn trọng giảm chuyển động.

Thư viện component React + Tailwind CSS v4 theo ngôn ngữ thiết kế Microsoft Fluent 2.

Có. Mọi màu đều lấy từ token và tự đổi theo thuộc tính data-theme.

Đặt data-brand="teams" (hoặc brand riêng) trên phần tử gốc.

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 { Accordion, AccordionItem, AccordionHeader, AccordionPanel } 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.

Thay đổi được áp dụng cho mọi thiết bị đã đăng nhập.

Bật xác thực hai lớp để tài khoản vẫn an toàn khi lộ mật khẩu.

Hoá đơn được gửi qua email vào ngày 1 hằng tháng.

Separated — thẻ có icon & mô tả

appearance="separated": mỗi mục là một thẻ; description là dòng phụ dưới tiêu đề (đọc ngay sau tiêu đề, nằm trong tên của nút).

Miễn phí cho đơn từ 50,00 US$, nhận hàng trong 2–4 ngày.

Đổi trả trong 30 ngày, giữ nguyên tem và hoá đơn.

Tính năng đang phát triển.

Outline, nhiều mục & chevron cuối

appearance="outline" — khung viền chung, vạch chia stroke-2; type="multiple", expandIconPosition="end", mục disabled.

Cài đặt, YugenProvider và component đầu tiên.

Theme, brand và hướng chữ.

Bố cục dựng sẵn, copy được nguyên file.

Lồng nhau

Accordion đặt trong AccordionPanel thừa hưởng size / expandIconPosition của cha và có đường dẫn dọc ở mép đầu dòng.

Nội dung panel cỡ small.

Nội dung panel cỡ medium.

Nội dung panel cỡ large.

Nội dung panel cỡ extra-large.

Kích thước

small, medium (mặc định), large, extra-large.

Cách dùng

Nên
  • Tiêu đề ngắn, mô tả rõ nội dung bên trong; dùng description cho tóm tắt một dòng.
  • Dùng separated cho trang cài đặt / FAQ nổi trên nền; outline khi Accordion nằm trên bề mặt cùng màu.
  • Mở sẵn mục quan trọng nhất (defaultValue); dùng type="multiple" khi cần so sánh nhiều mục.
Không nên
  • Không giấu thông tin bắt buộc phải đọc trong mục thu gọn.
  • Không lồng quá 2 cấp — phân cấp sâu hơn dùng Tree.
  • Không trộn nhiều appearance trong cùng một nhóm mục.

Props

Prop · KiểuMặc địnhMô tả
type"single" | "multiple"Mặc định: —Một hay nhiều mục mở cùng lúc (bắt buộc).
collapsiblebooleanMặc định: falsetype="single": cho phép đóng mục đang mở.
value / defaultValue / onValueChangestring | string[]Mặc định: —Mục đang mở.
appearance"flush" | "separated" | "outline"Mặc định: "flush"Liền mạch · thẻ rời (rounded-xlarge, shadow-2) · khung viền có vạch chia.
size"small" | "medium" | "large" | "extra-large"Mặc định: "medium"Cỡ header; Accordion lồng mặc định theo cha.
expandIconPosition"start" | "end"Mặc định: "start"Vị trí chevron; Accordion lồng mặc định theo cha.
AccordionItem.value / disabledstring / booleanMặc định: —Định danh mục; vô hiệu hoá.
AccordionHeader.iconReactNodeMặc định: —Icon cỡ 20 trước tiêu đề.
AccordionHeader.descriptionReactNodeMặc định: —Dòng mô tả phụ (caption) dưới tiêu đề; là một phần tên truy cập của nút (khớp chữ nhìn thấy — WCAG 2.5.3).