مؤشّر تقدّم
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، ويحذف القيمة الحالية في الحالة غير المحدّدة. التسمية label الظاهرة تسمّي الشريط؛ أما الحلقة فلا تسمية ظاهرة لها، فمرّر aria-label أو aria-labelledby.
استخدم getValueLabel لإعلان قيمة أوضح مثل «3 من 5 ملفّات».