هيكل تحميل
Skeletonعنصر نائب في React يحاكي شكل المحتوى أثناء التحميل: أسطر نص ودوائر وبطاقات وأشكال مضمّنة، بلمعان يحترم تفضيل تقليل الحركة.
يحاكي Skeleton شكل المحتوى أثناء تحميله. وهو aria-hidden، لذا علم السطح الجاري تحميله بـ aria-busy="true".
متى تستخدمه
استخدم Skeleton حين يكون تخطيط المحتوى القادم معروفًا، مثل قائمة بطاقات أو ترويسة ملف شخصي، لتحافظ الصفحة على شكلها أثناء تحميل البيانات. طابق الهيكل مع التخطيط النهائي لتجنّب القفزة.
للانتظار المجهول أو القصير يكفي Spinner. لا تعرض الهياكل أكثر من ثوانٍ قليلة دون تغذية راجعة.
أمثلة
مرحبًا بعودتك،
! يجري تحميل ملفك الشخصي.الخصائص
الخصائص التي يعرّفها Skeleton. سمات العنصر الأصلي تمرّ كما هي.
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
shape | "circle" | "text" | "square" | "rectangle" | ||
animation | "none" | "shimmer" | ||
width | string | number | Inline width override (any valid CSS length, e.g. "60%", 200, "4rem").
Defaults: text → 100%; rectangle → 100%; circle/square → 40px. | |
height | string | number | Inline height override. Defaults: text → 1em (tracks line-height, ≈ SDGA Line 22/14);
rectangle → 40px (= SDGA Large); circle/square → matches width (aspect-ratio 1). |
إمكانية الوصول
Skeleton مخفي بـ aria-hidden، فلا يراه قارئ الشاشة. علّم سطح التحميل بـ aria-busy="true" وأعلن الاكتمال عبر منطقة حيّة عند وصول المحتوى.
تتعطّل حركة اللمعان حين يفضّل المستخدم تقليل الحركة.