مؤشر تقدم
Progressشريط تقدم خطي وحلقة تقدم دائرية في React: حالة محددة وغير محددة، حالات تغذية راجعة، تسمية، نص مساعد، وعرض للقيمة.
يعرض Progress شريطاً خطياً، ويعرض CircularProgress حلقة. مرر value للحالة المحددة، ولا تمررها للحالة غير المحددة. تحتاج الحلقة إلى aria-label.
متى تستخدمه
استخدم Progress حين يمكن التعبير عن الاكتمال برقم: رفع ملف، فحص عدة ملفات، أو حصة. لا تستخدم الحالة غير المحددة إلا حين يكون الإجمالي مجهولاً. استخدم CircularProgress في المساحات الضيقة مثل البطاقات وخلايا الجداول.
لتدفقات الخطوات، استخدم ProgressIndicator.
أمثلة
الخصائص
الخصائص التي يعرفها Progress. سمات العنصر الأصلي تمر كما هي.
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
size | "sm" | "md" | "lg" | ||
variant | "primary" | "neutral" | ||
state | "error" | "success" | "normal" | ||
value | number | Current progress. null/omitted renders the indeterminate slide. Clamp to [0, max] yourself. | |
max | number | Maximum value. Defaults to 100. | |
label | react.ReactNode | ||
required | boolean | ||
helperText | react.ReactNode | ||
showValue | boolean | ||
aria-label | string | ||
aria-labelledby | string | ||
getValueLabel | (value: number, max: number) => string |
إمكانية الوصول
يعرض Progress role="progressbar" مع aria-valuenow، aria-valuemin، وaria-valuemax. في الحالة غير المحددة، يحذف Progress القيمة الحالية. تسمي label الظاهرة الشريط، بينما لا تسمية ظاهرة للحلقة. لذلك مرر للحلقة aria-label أو aria-labelledby.
استخدم getValueLabel لإعلان قيمة أوضح مثل "3 من 5 ملفات".