Skeleton
Skeleton là bản phác hình khối của nội dung sắp hiển thị, giúp giảm cảm giác chờ đợi khi tải.
Skeleton bọc các SkeletonItem và phát tín hiệu aria-busy. Ghép SkeletonItem (rectangle / circle / square, cao 8 → 128px) theo đúng bố cục nội dung thật. Hiệu ứng wave hoặc pulse tự tắt khi người dùng bật giảm chuyển động.
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 { Skeleton, SkeletonItem } 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.
Pulse
Nhấp nháy độ mờ thay cho dải sáng.
Hình dạng
circle, square, rectangle.
Translucent
Bán trong suốt, dùng trên bề mặt có màu nền.
Cách dùng
Nên
- Mô phỏng sát bố cục thật (avatar tròn, dòng tiêu đề ngắn hơn dòng nội dung).
- Đặt aria-label mô tả nội dung đang tải trên Skeleton.
Không nên
- Không dùng Skeleton cho thao tác của người dùng (lưu, gửi) — dùng Spinner.
- Không để Skeleton hiển thị mãi khi tải lỗi — thay bằng thông báo lỗi.
- Không trộn wave và pulse trong cùng một vùng.
Props
| Prop · Kiểu | Mặc định | Mô tả |
|---|---|---|
| Skeleton | Mặc định: "wave" | Hiệu ứng cho mọi SkeletonItem con. |
| Skeleton | Mặc định: "opaque" | Nền đặc hay bán trong suốt. |
| SkeletonItem | Mặc định: "rectangle" | Hình dạng khối. |
| SkeletonItem | Mặc định: 16 | Chiều cao (rectangle) hoặc cạnh (circle / square), px. |
| SkeletonItem | Mặc định: — | Ghi đè giá trị của Skeleton cha. |
Messages
Chữ có sẵn của component: nhãn, aria-label, thông báo cho trình đọc màn hình.
Mặc định là tiếng Anh. Đổi qua prop messages của YugenProvider, theo namespace bên dưới; messagesVi chứa bản tiếng Việt. Xem Ngôn ngữ giao diện.
messages.skeleton
| Khoá · Kiểu | Mặc định (tiếng Anh) | messagesVi |
|---|---|---|
| labelstring aria-label của vùng đang tải (role="progressbar"). | Mặc định (tiếng Anh)"Loading content" | messagesVi"Đang tải nội dung" |