ข้ามไปเนื้อหา
แบรนด์ที่แสดง
ธีม: ตามระบบ
คอมโพเนนต์ทั้งหมด

Skeleton

โครงร่างที่มีรูปทรงเดียวกับเนื้อหาที่กำลังโหลด

ui/feedback.tsxServer safe

ตามรูปทรงของเนื้อหา

วาดโครงให้ตรงกับการ์ดที่จะแสดง ผู้ใช้จึงรู้ว่ากำลังรออะไร และหน้าไม่กระโดดเมื่อข้อมูลมา
tsx
<Card role="status" aria-busy="true" aria-label="กำลังโหลดคอร์ส">
  <Skeleton height={140} />
  <Skeleton shape="text" width="70%" />
  <Skeleton shape="text" width="40%" />
</Card>

Props

PropTypeDefaultคำอธิบาย
shape"block" | "text" | "circle""block"รูปทรง
width / heightnumber | string-ขนาด

การเข้าถึง

  • Skeleton ซ่อนจากโปรแกรมอ่านหน้าจอ ตั้ง aria-busy และ aria-label ที่กล่องแม่
  • แสงวิ่งหยุดเมื่อผู้ใช้เลือกลดการเคลื่อนไหว