Collapse
Collapse giãn hoặc thu chiều cao (hoặc chiều rộng) của một vùng nội dung một cách mượt mà.
Dùng kỹ thuật CSS grid-template-rows 0fr → 1fr nên không phải đo chiều cao bằng JavaScript. Collapse tự render phần tử bọc nên children có thể là bất kỳ nội dung nào. Khác Collapsible (Bố cục): Collapse chỉ là chuyển động, không có trigger hay trạng thái riêng.
Collapse dùng kỹ thuật grid-template-rows 0fr → 1fr nên không cần đo chiều cao nội dung — văn bản dài, ảnh hay danh sách đều giãn mượt.
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 { Collapse } 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ều ngang
orientation="horizontal" thu/giãn chiều rộng — vd. bảng điều hướng thu gọn.
- Mở: slow (300ms), giảm tốc
- Đóng: fast (150ms), tăng tốc
- Không đổi opacity
Thời lượng & không opacity
Mở chậm (slow), đóng nhanh (fast); animateOpacity={false} chỉ đổi kích thước.
Cách dùng
Nên
- Đặt aria-expanded trên nút điều khiển.
- Dùng cho nội dung phụ: chi tiết, bộ lọc nâng cao, ghi chú.
Không nên
- Không đặt nội dung bắt buộc phải đọc trong vùng thu gọn mặc định.
- Không lồng nhiều Collapse chạy cùng lúc gây giật bố cục.
Props
| Prop · Kiểu | Mặc định | Mô tả |
|---|---|---|
| visibleboolean | Mặc định: — | true: chạy chuyển động vào; false: chạy chuyển động ra. |
| appearboolean | Mặc định: false | Chạy chuyển động vào ngay lần render đầu (khi visible = true). |
| unmountOnExitboolean | Mặc định: false | Gỡ phần tử khỏi DOM khi thoát xong; nếu false phần tử được ẩn (visibility: hidden). |
| duration"faster" | "fast" | "normal" | "gentle" | "slow" | Mặc định: "normal" | Thời lượng pha vào — map tới token --durationFaster … --durationSlow; easing --curveDecelerateMid. |
| exitDuration"faster" | "fast" | "normal" | "gentle" | "slow" | Mặc định: = duration | Thời lượng pha ra; easing --curveAccelerateMid. |
| onMotionFinish(direction: "enter" | "exit") => void | Mặc định: — | Gọi khi một pha chuyển động kết thúc. |
| orientation"vertical" | "horizontal" | Mặc định: "vertical" | Thu/giãn chiều cao hoặc chiều rộng. |
| animateOpacityboolean | Mặc định: true | Kèm mờ dần. |
| childrenReactNode | Mặc định: — | Nội dung bất kỳ (Collapse tự bọc). |
| className / …div propsHTMLAttributes<HTMLDivElement> | Mặc định: — | Truyền cho phần tử bọc ngoài. |