مؤشر تحميل
Spinnerمؤشر تحميل غير محدد في React يتبع حجم النص ولونه الحاليين، بأحجام ودرجات وتسمية متاحة افتراضياً.
يدل Spinner على عمل مدته غير معروفة. يأخذ Spinner افتراضياً الحجم 1em واللون currentColor، لذا يتناسب مع النص المحيط به.
متى تستخدمه
استخدم Spinner أثناء تحميل شيء مجهول المدة: جلب قائمة، إرسال طلب، أو التحقق من حالة. استخدم الخاصية loading داخل Button بدلاً منه، لأنها تضع المؤشر لك.
حين تكون المدة أو التقدم معروفين، استخدم Progress. للعناصر النائبة للمحتوى، استخدم Skeleton.
أمثلة
الخصائص
الخصائص التي يعرفها Spinner. سمات العنصر الأصلي تمر كما هي.
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
size | "sm" | "md" | "lg" | "xl" | ||
tone | "primary" | "onColor" | "neutral" | ||
aria-label | string | Defines a string value that labels the current element.
Accessible label announced by screen readers. Defaults to "Loading".
Pass aria-hidden="true" (e.g. inside a Button that already has its
own label) to suppress. |
إمكانية الوصول
يعلن Spinner "جار التحميل" افتراضياً عبر aria-label. مرر تسميتك لتذكر ما الذي يجري تحميله. داخل أداة لها تسمية أصلاً، مرر aria-hidden="true" لتجنب الإعلان المزدوج.
اقرن المؤشر بـ aria-busy="true" على المنطقة الجاري تحميلها، لتصل حالتها إلى التقنيات المساعدة.