Spinner
يوضح أن عملية قيد التنفيذ. سبعة أحجام، بنمط primary وneutral وللخلفيات الملونة.
الإصدار 0.2.0 ·
التثبيت
bunx --bun shadcn@latest add @dga/spinnerالاستخدام
import { Spinner } from "@/components/ui/spinner";
<Spinner label="جارٍ التحميل" />البنية
- Root: عنصر
role="status"فيه الحلقة المتحركة. - Label: نص مخفي بصريًا تعلنه قارئات الشاشة.
أمثلة
الأحجام والألوان
سبعة أحجام من 2xs (20px) إلى 2xl (44px)، بالأنماط primary وneutral وon-color وcurrent (يتبع لون النص، للاستخدام داخل الأزرار).
الزخرفي
مرّر label={null} حين يعلن العنصر المحيط حالة الانشغال بنفسه، كما يفعل Button.
اتجاه RTL
الحلقة بلا اتجاه، فلا ينقلب شيء. ترجم label في الصفحات العربية.
إمكانية الوصول
role="status"مع تسمية مخفية بصريًا، فتعلنه قارئات الشاشة مرة واحدة.- مع
label={null}يُخفى المؤشر عن قارئات الشاشة. - عند تفضيل تقليل الحركة، يدور المؤشر ببطء بدل أن يتوقف، فتبقى حالة الانشغال ظاهرة.
مرجع API
Spinner
مؤشر تحميل. يدور ببطء عند تفضيل تقليل الحركة.
| الخاصية | النوع | القيمة الافتراضية |
|---|---|---|
"2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"القطر بأحجام Figma، من `2xs` (20px) إلى `2xl` (44px). | "md" | |
| ||
"on-color" | "primary" | "neutral" | "current"اللون. `current` يأخذ لون نص العنصر الأب، للاستخدام داخل الأزرار. | "primary" | |
| ||
stringنص يُعلَن لقارئ الشاشة. مرّر `null` عندما يعلن شيء آخر حالة الانشغال (مثل زر فيه aria-busy). | "Loading" | |
| ||
يقبل أيضًا خصائص العنصر الذي يُصيّره.
الاختلافات عن DGA
لا شيء. يطابق هذا المكوّن ملف DGA في Figma.
التباين
16 زوجًا لونيًا فُحص · جميعها تجتاز WCAG 2.1 AAعرض 3 حالةإخفاء
| النمط / الحالة | الفاتح | الداكن |
|---|---|---|
| primary / indicator | 4.54:1 3:1 | 10.38:1 3:1 |
| neutral / indicator | 17.31:1 3:1 | 15.87:1 3:1 |
| on-color / indicator | 4.74:1 3:1 | 4.74:1 3:1 |
يحتاج النص إلى تباين 4.5:1، والأيقونات وحلقات التركيز إلى 3:1. الحالات المعطّلة مستثناة. تقرير التباين الكامل