هيكل تحميل
Skeletonعنصر نائب في React يحاكي شكل المحتوى أثناء التحميل: أسطر نص ودوائر وبطاقات وأشكال مضمنة، بلمعان يحترم تفضيل تقليل الحركة.
يحاكي Skeleton شكل المحتوى أثناء تحميله. يحمل 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). |
إمكانية الوصول
يخفي aria-hidden مكون Skeleton عن قارئ الشاشة. علّم سطح التحميل بـ aria-busy="true"، وأعلن الاكتمال عبر منطقة حية عند وصول المحتوى.
تتعطل حركة اللمعان حين يفضل المستخدم تقليل الحركة.