Skeleton
عناصر نائبة تظهر أثناء تحميل المحتوى. مستطيل ومربع ودائرة وخط بأحجام Figma.
الإصدار 0.2.0 ·
التثبيت
bunx --bun shadcn@latest add @dga/skeletonالاستخدام
import { Skeleton } from "@/components/ui/skeleton";
<div aria-busy="true" aria-live="polite">
<Skeleton shape="circle" size={48} />
<Skeleton shape="line" size="lg" />
</div>يعرض Skeleton شكل المحتوى أثناء تحميله، فلا تقفز الصفحة عند وصوله. اضبط العرض عبر className (مثل w-32).
أمثلة
التخطيطات
مكوّنات Skeleton الخمسة في Figma، مبنية من العنصر الأساسي. انسخها نقطة بداية.
اتجاه RTL
تتبع التخطيطات اتجاه القراءة: تقع الصورة الرمزية في البداية.
إمكانية الوصول
- عناصر Skeleton مخفية عن قارئات الشاشة. اضبط
aria-busy="true"على المنطقة التي تُحمَّل، وأزله عند وصول المحتوى. - يتوقف النبض عند تفضيل تقليل الحركة.
مرجع API
Skeleton
عنصر نائب يظهر أثناء تحميل المحتوى. مخفي عن قارئ الشاشة: اضبط aria-busy="true" على المنطقة التي تُحمَّل بدلًا من ذلك.
| الخاصية | النوع | القيمة الافتراضية |
|---|---|---|
"rectangle" | "line" | "square" | "circle"شكل العنصر النائب. | "rectangle" | |
| ||
"sm" | "md" | "lg" | 24 | 48 | 64 | 80 | 120 | 170 | 240الحجم في Figma. احذفه وحدّد حجم الهيكل بـ `className`. | لا توجد قيمة افتراضية | |
| ||
يقبل أيضًا خصائص العنصر الذي يُصيّره.
الاختلافات عن DGA
| التغيير | السبب |
|---|---|
--skeleton-background (new) | Placeholder fill: neutral-200, neutral-700 in dark mode. |
Skeleton: composite types | The composites are layouts of the primitives; real pages need their own shapes. |
Skeleton: animation | A gentle pulse shows that content is loading. prefers-reduced-motion turns it off. |
عرض جميع الاختلافات (3) لهذا المكوّن أسباب الاختلافات مكتوبة بالإنجليزية.
التباين
لا توجد أزواج للتباين: هذا المكوّن تزييني. يجب ألا يعتمد عليه أي محتوى يحمل معنى (يسري WCAG 1.4.11 على الرسوم اللازمة لفهم المحتوى فقط).