Yugen UI

Collapsible

Collapsible ẩn / hiện một vùng nội dung bằng một nút điều khiển, có chuyển động chiều cao.

Khối đơn lẻ (khác Accordion là nhóm nhiều mục). Nội dung đóng bị ẩn khỏi trình đọc màn hình và thứ tự Tab; chuyển động dùng grid-template-rows, tự tắt khi bật giảm chuyển động.
  • Báo cáo Q3.docx
  • Kế hoạch 2027.xlsx
  • Biên bản họp.docx
  • Ngân sách.xlsx
  • Thiết kế.fig

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 { Collapsible, CollapsibleTrigger, CollapsibleContent } 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.

Chi tiết đơn hàng #1024
2 × Bàn phím cơ — 258,00 US$1 × Chuột không dây — 49,00 US$Tổng: 307,00 US$

Mở sẵn, nút icon

Không cần state: chevron xoay theo data-state của trigger.

Cách dùng

Nên
  • Nhãn nút nói rõ điều sẽ xảy ra (“Hiện thêm 3 mục”, “Thu gọn”).
  • Dùng cho nội dung phụ, chi tiết mở rộng của một khối.
Không nên
  • Không dùng nhiều Collapsible liền nhau như danh sách — dùng Accordion.
  • Không ẩn hành động chính trong vùng thu gọn.

Props

Prop · KiểuMặc địnhMô tả
open / defaultOpen / onOpenChangeboolean / boolean / (open) => voidMặc định: —Trạng thái mở.
disabledbooleanMặc định: falseKhoá trigger.
CollapsibleTrigger.asChildbooleanMặc định: —Dùng Button của bạn làm trigger (nhận data-state).
CollapsibleContent.classNamestringMặc định: —Áp cho khối bên trong — đặt padding / layout ở đây.