نظرة عامة
يوفرProgressRing مظهراً دائرياً لـ التقدم. يتشارك النطاق المخصص للجذر، والقيمة الخالية، والتنسيق، ووضع التسميات، والخاصية الأصلية، والمرجع، وعقد العرض. تعرض العناصر الفرعية الاختيارية قيمة منسقة مسبقاً بجانب الحلقة.
استخدام
وفّر القيمة الأولية المتحكَّم بها واسماً متاحاً. استخدمaria-valuetext عندما تشرح القيمة المنسقة التقدّم بوضوح أكبر من النسبة المئوية.
aria-labelledby لربط الحلقة بتسمية مرئية موجودة، أو أنشئ Progress.Label كعنصر فرعي. لا توفر العناصر الفرعية المنسقة مسبقاً اسم الحلقة المتاح تلقائياً.
التقدم والنطاقات المتحكَّم بها
يحسب التطبيقvalue وينسّق محتوى العرض. لا تجلب الحلقة البيانات، ولا تتقدم في التقدّم، ولا تحسب الحصص. القيمة الافتراضية لـ min هي 0، والقيمة الافتراضية لـ max هي 100. تُقيَّد القيم المحدودة ضمن النطاق للقيم الدلالية وهندسة القوس. يمتلئ القوس وفقاً للنسبة المئوية المطبّعة، بما في ذلك عندما يكون الحد الأدنى غير صفري.
مرّر value={null} للتقدم غير المحدد. تحذف الحلقة aria-valuenow وتعرض قوساً غير محدد. تبقى القيم غير المحدودة غير محددة أيضاً؛ ولا تصبح صفراً أو اكتمالاً. يبقى محتوى العرض متحكَّماً به من التطبيق.
استخدم locale وformat وgetAriaValueText كما هو موضح في التقدم. أنشئ Progress.Value لعرض القيمة المنسقة للجذر.
استخدم ProgressBar للتقدم الأفقي أو MetricRow للحصول على تسمية وقيمة محاذاة.
المظهر والتركيب
يعرضsize="md" حلقة بحجم 16px؛ ويعرض size="sm" حلقة بحجم 14px. يستخدم كلاهما حدًا بعرض 2px ويملآن باتجاه عقارب الساعة بدءًا من الأعلى. يقبل barColor ألوان CSS، بما في ذلك متغيرات السمة. إن SVG زخرفي ومخفي عن واجهات برمجة تطبيقات إمكانية الوصول.
تتحرك تغييرات القيمة لمدة 300ms. تؤدي تفضيلات تقليل الحركة إلى تعطيل الانتقال والدوران غير المحدد. تستهدف السمات الأصلية وclassName وstyle وref عنصر التقدّم الخارجي. يمكن لـ className وstyle تلقي حالة التقدم. يمكن لـ render استبدال الجذر مع الاحتفاظ بدلالاته.
الإزاحة
string
Accessible name identifying the measured operation.
string
ID of the visible label that names the operation.
string
Human-readable progress value overriding the default formatted value.
string
CSS color of the filled arc. Defaults to the blue theme color.
ReactNode
Optional preformatted value or Progress parts displayed before the ring.
string | ((state: ProgressRootState) => string | undefined)
Class applied to the progress root, or a callback receiving its status.
NumberFormatOptions
Intl.NumberFormat options for the clamped numeric value. The default displays the normalized percentage.
((formattedValue: string, value: number | null) => string)
Receives the formatted value and raw value, including null, and returns an accessible value description.
LocalesArgument
Locale or locale list used to format the value. Defaults to the runtime locale.
number
افتراضي:"100"
Inclusive maximum. Defaults to 100.
number
افتراضي:"0"
Inclusive minimum. Defaults to 0.
Ref<HTMLDivElement>
Ref to the root div, or the element composed through render.
ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ProgressRootState>
Composes the root with an element or render callback. Forward the supplied props and ref to retain progress semantics.
"md" | "sm"
افتراضي:"md"
Ring diameter: sm (14px) or md (16px). Defaults to md.
CSSProperties | ((state: ProgressRootState) => CSSProperties | undefined)
Inline styles applied to the progress root, or a callback receiving its status.
number | null
مطلوب
Controlled value in the min/max range. Use null for indeterminate progress.