ComponentComponent cơ bản
Bắt đầu nhanh
Import Skeleton từ entry công khai. Các ví dụ bên dưới thể hiện những kiểu tương tác và cấu hình được hỗ trợ.
component.tsxtsx
import { Skeleton } from '@underverse-ui/underverse';Ví dụ tương tác
Dùng thử Skeleton thật, xem mã ví dụ và tra cứu các prop đã được mô tả.
Đang tải ví dụ tương tác…
Tham chiếu
Tham chiếu API
Tra cứu các thuộc tính, kiểu dữ liệu được chấp nhận, giá trị mặc định và lưu ý về hành vi.
Dữ liệu được sinh từ API TypeScript công khai của thư viện. Kiểu dữ liệu, thuộc tính bắt buộc và giá trị mặc định luôn đồng bộ với mã nguồn.
Skeleton
Component| Thuộc tính | Mô tả | Kiểu | Mặc định |
|---|---|---|---|
className | Class tuỳ chỉnh cho skeleton. | string | — |
width | Chiều rộng (px, %, ...). | string | number | — |
height | Chiều cao (px, %, ...). | string | number | — |
variant | Biến thể hiển thị (rectangular, circular, rounded, text). | "rectangular" | "circular" | "rounded" | "text" | "rectangular" |
animation | Kiểu animation (pulse, wave, none). | "pulse" | "wave" | "none" | "pulse" |
lines | Số dòng (áp dụng khi variant = text). | number | 1 |
SkeletonAvatar
Component| Thuộc tính | Mô tả | Kiểu | Mặc định |
|---|---|---|---|
size | Kích thước avatar skeleton. | "sm" | "md" | "lg" | "md" |
className | Class tuỳ chỉnh. | string | — |
SkeletonButton
Component| Thuộc tính | Mô tả | Kiểu | Mặc định |
|---|---|---|---|
size | Kích thước button skeleton. | "sm" | "md" | "lg" | "md" |
className | Class tuỳ chỉnh. | string | — |
SkeletonCard
Component| Thuộc tính | Mô tả | Kiểu | Mặc định |
|---|---|---|---|
showAvatar | Hiển thị avatar trong header. | boolean | true |
showImage | Hiển thị vùng ảnh. | boolean | false |
textLines | Số dòng văn bản. | number | 3 |
className | Class tuỳ chỉnh. | string | — |
children | Nội dung skeleton tuỳ chỉnh thay cho layout mặc định. | React.ReactNode | — |
SkeletonList
Component| Thuộc tính | Mô tả | Kiểu | Mặc định |
|---|---|---|---|
items | Số mục. | number | 5 |
itemHeight | Chiều cao mỗi mục (px). | number | 60 |
showAvatar | Hiển thị avatar trong mục. | boolean | true |
className | Class tuỳ chỉnh. | string | — |
SkeletonMessage
Component| Thuộc tính | Mô tả | Kiểu | Mặc định |
|---|---|---|---|
own | Kiểu tin nhắn của chính mình. | boolean | false |
showAvatar | Hiển thị avatar. | boolean | true |
className | Class tuỳ chỉnh. | string | — |
SkeletonPost
Component| Thuộc tính | Mô tả | Kiểu | Mặc định |
|---|---|---|---|
className | Class tuỳ chỉnh. | string | — |
SkeletonTable
Component| Thuộc tính | Mô tả | Kiểu | Mặc định |
|---|---|---|---|
rows | Số hàng. | number | 5 |
columns | Số cột. | number | 4 |
className | Class tuỳ chỉnh. | string | — |
SkeletonText
Component| Thuộc tính | Mô tả | Kiểu | Mặc định |
|---|---|---|---|
lines | Số dòng văn bản. | number | 3 |
className | Class tuỳ chỉnh. | string | — |
width | Chiều rộng dòng. | string | "100%" |
Hướng dẫn sử dụng
Dùng Skeleton như một khối giao diện nền tảng đáng tin cậy. Ưu tiên HTML có ngữ nghĩa, dùng biến thể có mục đích và không ghi đè các trạng thái truyền đạt ý nghĩa.
Trợ năng
Khi dùng Skeleton, hãy giữ trạng thái focus dễ nhận biết, cung cấp tên truy cập khi cần và kiểm tra bàn phím cùng trình đọc màn hình trong ngữ cảnh thực tế.