Yugen UI

Skeleton presets

Khung xương dựng sẵn cho đoạn văn, avatar, thẻ, danh sách và bảng — cùng kích thước, bo góc và khoảng cách với component thật.

Các preset dựng trên SkeletonItem và kế thừa animation (wave / pulse) cùng appearance (opaque / translucent). Đứng một mình, mỗi preset là một Skeleton (role="progressbar", aria-busy); lồng trong nhau thì không lặp thông báo cho trình đọc màn hình. Dùng làm prop skeleton của AsyncContent.
Yugen Labs · thử nghiệmComponent này nằm ngoài SemVer: API có thể đổi ở một bản minor, và thay đổi sẽ được ghi trong Có gì mới. Chính sách phiên bản

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 { SkeletonText, SkeletonAvatar, SkeletonCard, SkeletonList, SkeletonTable } 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.

SkeletonText

lines dòng, dòng cuối ngắn hơn; size small 12 · medium 16 · large 20px.

SkeletonAvatar

Dùng đúng size của Avatar sẽ thay thế.

SkeletonTable

rows × columns, dòng cao 44px như Table size medium.

Bùi Thanh Nam
2 giờ trước

Mùa hoa Đà Lạt

Mai anh đào nở rộ quanh hồ Xuân Hương, đẹp nhất vào sáng sớm.

Khung xương khớp nội dung thật

SkeletonCard header + 2 dòng + 2 nút trùng khít Card bên dưới — lúc đổi không có gì nhảy chỗ.

Cách dùng

Nên
  • Khớp bố cục thật: cùng số cột, cỡ avatar, chiều cao dòng và vị trí nút.
  • Chỉ dựng khung cho phần chắc chắn sẽ có; giữ số dòng gần với dữ liệu thường gặp.
  • Dùng translucent trên bề mặt có màu, pulse khi wave gây rối mắt.
Không nên
  • Không dựng khung cho nội dung đã có sẵn (tiêu đề trang, nhãn tĩnh).
  • Không dùng khung xương cho thao tác dưới 300ms — để AsyncContent / useSpinDelay lo.
  • Không lồng thêm Spinner vào giữa khung xương.

Props

Prop · KiểuMặc địnhMô tả
SkeletonText.lines / sizenumber · "small" | "medium" | "large"Mặc định: 3 · "medium"Số dòng (dòng cuối 60%) và chiều cao dòng.
SkeletonAvatar.size / shapeSkeletonItemSize · "circular" | "square"Mặc định: 32 · "circular"Cạnh (px) và hình.
SkeletonCard.header / media / lines / actionsboolean · boolean · number · numberMặc định: false · true · 2 · 2Các phần của thẻ.
SkeletonList.rows / avatarSize / avatarShapenumber · SkeletonItemSize · "circular" | "square"Mặc định: 3 · 40 · "circular"Số dòng và avatar mỗi dòng.
SkeletonTable.rows / columns / headernumber · number · booleanMặc định: 5 · 4 · trueKích thước bảng.
animation / appearance"wave" | "pulse" · "opaque" | "translucent"Mặc định: "wave" · "opaque"Như Skeleton; preset lồng nhau kế thừa từ preset ngoài.

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ểuMặ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"