Stagger
Stagger cho các phần tử con xuất hiện lần lượt, cách nhau một độ trễ ngắn.
Khi visible bật, Stagger lần lượt bật visible cho từng con; khi tắt thì ẩn theo thứ tự ngược lại. Con là Fade/Scale/Slide/Blur/Rotate/Collapse được điều khiển trực tiếp; phần tử thường được bọc tự động trong Fade. Stagger render fragment — đặt nó bên trong phần tử bố cục (flex, grid).
Thiết kế token
Dựng component
Viết tài liệu
Kiểm thử RTL
Phát hành
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 { Stagger } 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.
桜
幽
玄
和
風
Với Slide
Con là presence component nên giữ được kiểu chuyển động riêng; itemDelay="fast".
appear với Scale
Lưới ô lần lượt phóng ra ngay khi gắn vào trang.
Cách dùng
Nên
- Dùng cho danh sách ngắn (≤ 10 mục) để tạo nhịp khi nội dung xuất hiện.
- Giữ itemDelay ngắn (faster/fast).
Không nên
- Không stagger danh sách dài hoặc dữ liệu cập nhật liên tục.
- Không bắt người dùng chờ animation xong mới thao tác được.
Props
| Prop · Kiểu | Mặc định | Mô tả |
|---|---|---|
| visibleboolean | Mặc định: — | Bật/tắt toàn bộ nhóm. |
| itemDelay"faster" | "fast" | "normal" | "gentle" | "slow" | Mặc định: "faster" | Độ trễ giữa hai phần tử (token --duration*). |
| appearboolean | Mặc định: false | Chạy lần lượt ngay lần gắn đầu. |
| unmountOnExitboolean | Mặc định: false | Truyền cho từng con (nếu con chưa tự đặt). |
| childrenReactNode | Mặc định: — | Presence component hoặc phần tử thường (tự bọc Fade). |