نظرة عامة
يوفرProgressBar مظهرًا أفقيًا لـ التقدم. يحافظ على العقد الكامل للجذر، بما في ذلك السمات الأصلية والمراجع وتركيب التصيير والتنسيق والنطاقات المخصصة والتقدم غير المحدد. أضف إليه aria-label يحدد العملية.
استخدام
ملكية الحالة والنطاقات
value مطلوب ويتحكم فيه التطبيق. لا يوجد وضع defaultValue. لا يبدأ المكوّن طلبًا ولا يقدّم التقدم من تلقاء نفسه. مرّر null عندما يكون التقدم غير معروف. تظل القيم غير المحدودة أيضًا غير محددة.
القيمة الافتراضية لـ min هي 0، والقيمة الافتراضية لـ max هي 100. تُقيَّد القيم المحدودة ضمن النطاق للقيمة الدلالية والتعبئة المطبّعة. تملأ القيمة 70 ضمن النطاق من 20 إلى 120 نصف الشريط وتعرض 50%، بينما يبقى aria-valuenow بقيمة 70.
استخدم aria-valuetext وgetAriaValueText وlocale وformat كما هو موضح في التقدم. استخدم أجزاء Progress المركّبة عندما تحتاج التسميات والقيم إلى تخطيط مرئي خاص بها.
استخدم Toast للإشعارات التي تتضمن عدًّا تنازليًا للإغلاق وإيقافًا مؤقتًا عند التمرير.
المظهر والتركيب
يختارsize مسارًا بحجم 6px أو 8px. يقبل barColor وbackgroundColor ألوان CSS، بما في ذلك متغيرات النسق. يجعل withBorderRadius المسار والمؤشر مستديرين. يحافظ withMinimumFillWidth على تعبئة جمالية صغيرة بين الحد الأدنى والإكمال فقط. لا يتجاوز هذا الحد الأدنى 12px ونصف عرض المسار، لذا يظل المسار الضيق يميّز التقدم غير المكتمل عن الإكمال. لا يملأ شريطًا فارغًا ولا يغيّر القيم الدلالية.
تستهدف السمات الأصلية وclassName وstyle وref العنصر الجذر. يمكن أن يتلقى className وstyle حالة التقدم. يمكن لـ render استبدال العنصر الجذر مع الحفاظ على دلالاته. للتقدم غير المحدد مظهره الخاص دون عرض نسبة مئوية رقمية. تعطّل تفضيلات تقليل الحركة انتقالات التعبئة والحركة غير المحددة.
ركّب أجزاء Progress للتخطيطات المخصصة أو الرسوم المتحركة الخاصة بالميزات. تنتمي توقيتات الميزات، وتأثير الظهور التدريجي، واللمعان، والنوابض، واستدعاءات الإكمال إلى تركيب التطبيق.
الترحيل
استبدلariaLabel بـ aria-label الأصلي. تمت إزالة الخصائص withGrowIn وwithGlint وwithSpringFill وonGrowInComplete. نفّذ مظهرها وتوقيتها واستدعاءات الإكمال في تركيب التطبيق باستخدام أجزاء Progress. يبقى onAnimationEnd الأصلي متاحًا على العنصر الجذر.
الخصائص
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
افتراضي:"none"
CSS background color of the track.
string
CSS color of the filled bar. Defaults to the primary text color.
ReactNode
Additional Progress parts or supporting content inside the root.
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"
Bar height: sm (6px) or md (8px).
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.
boolean
افتراضي:"false"
Rounds the track and indicator corners.
boolean
افتراضي:"true"
Applies a cosmetic minimum of up to 12px, capped at half the track width, only above the minimum and below completion.