الانتقال إلى المحتوى الرئيسي

نظرة عامة

MetricRow يحاذي تسمية وأيقونة اختيارية وقيمة منسقة مسبقًا. تستخدم ProgressRing الاختيارية التسمية المرئية بوصفها اسم إمكانية الوصول الخاص بها.

استخدام

مرر تسمية نصية غير فارغة كعناصر فرعية مطلوبة، والقيمة المنسقة عبر value. أضف progress عندما يحتوي المقياس على نسبة مئوية معروفة. يتولى التطبيق مسؤولية الحسابات والوحدات وتنسيق الأرقام ومعنى المقياس. يقبل progressColor لون CSS للقوس المعبأ.

قيم بدون تقدم

احذف progress لعرض قيمة عادية. تُعرض القيمة الرقمية صفر بالشكل 0؛ ولا يُستبدل المحتوى مطلقًا بعنصر نائب. وفّر عنصرًا نائبًا خاصًا بك عندما لا تكون البيانات متاحة.

التركيب وإمكانية الوصول

يقبل محتوى التسمية العُقد. يُسمّي النص المتاح الخاص به حلقة التقدّم عبر aria-labelledby، بما في ذلك النص المتداخل. وفّر تسمية مرئية ذات معنى. تُعرَض أيضًا قيمة سلسلة نصية غير فارغة كنص قيمة يمكن الوصول إليه. بالنسبة إلى محتوى القيمة المنسقة، وفّر progressValueText عندما لا تصف النسبة المئوية المقياس بالكامل. يتجاوز هذا النص القيمة الاحتياطية للسلسلة النصية. من دونه، يحتفظ المحتوى الآخر بنص قيمة النسبة المئوية للحلقة. يستخدم progressValueText الفارغ أيضًا النسبة المئوية، بما في ذلك عندما تكون value سلسلة نصية. العقدة الاختيارية startIcon للزينة. يتحكم المستدعي في أبعادها وحدّها.
استبدل startIcon={IconDatabase} بـ startIcon={<IconDatabase size={14} />}. تظل القيم منسقة مسبقًا بواسطة التطبيق. تستهدف السمات الأصلية وclassName وstyle وref الصف الخارجي. يمكن لـ render استبدال ذلك العنصر. يبقى التقدم خاضعًا للتحكم ومحصورًا بين 0 و100، مع سلوك الحركة المخفّضة نفسه المتبع في ProgressRing.

الإزاحة

ReactNode
مطلوب
Label content whose accessible text also names the optional progress ring.
string
CSS class applied to the row root.
number
Optional controlled progress from 0 to 100. Omitting it displays the value without a ring.
string
CSS color of the filled arc when progress is provided.
string
Accessible value text for the progress ring. Nonempty text overrides the string value fallback; an empty string uses the ring percentage. Supply it when formatted content needs more context than a percentage.
ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>
Replaces the row root element while preserving its contents.
ReactNode
Decorative node content before the label. The caller controls icon geometry.
CSSProperties
Inline styles applied to the row root.
ReactNode
مطلوب
Preformatted value displayed at the end of the row. Nonempty string values also supply the progress ring accessible value text.