Обзор
ProgressRing придает Progress круговой вид. Он использует те же контракт пользовательского диапазона, null, форматирования, маркировки, нативного свойства, ref и render, что и корневой компонент. Необязательные дочерние элементы отображают предварительно отформатированное значение рядом с кольцом.
Использование
Передайте исходное контролируемое значение и доступное имя. Используйтеaria-valuetext, когда отформатированное значение объясняет прогресс понятнее, чем процент.
aria-labelledby, чтобы связать кольцо с существующей видимой меткой, или скомпонуйте Progress.Label как дочерний элемент. Предварительно отформатированные дочерние элементы не задают доступное имя кольца автоматически.
Контролируемый прогресс и диапазоны
Приложение вычисляетvalue и форматирует отображаемое содержимое. Кольцо не получает данные, не продвигает прогресс и не вычисляет квоты. Значение min по умолчанию равно 0, а max — 100. Конечные значения ограничиваются диапазоном для семантических значений и геометрии дуги. Дуга заполняется в соответствии с нормализованным процентом, в том числе когда минимум не равен нулю.
Передайте value={null} для неопределенного прогресса. Кольцо не включает aria-valuenow и отображает неопределенную дугу. Неконечные значения также остаются неопределенными; они не становятся нулем или завершением. Отображаемое содержимое остается под управлением приложения.
Используйте locale, format и getAriaValueText, как описано в Progress. Скомпонуйте Progress.Value, чтобы отобразить отформатированное значение корневого компонента.
Используйте ProgressBar для горизонтального прогресса или MetricRow для метки и выровненного значения.
Внешний вид и композиция
size="md" отображает кольцо размером 16px; size="sm" отображает кольцо размером 14px. Оба используют обводку 2px и заполняются по часовой стрелке, начиная сверху. barColor принимает цвета CSS, включая переменные темы. SVG является декоративным и скрыт от API доступности.
Изменения значения анимируются в течение 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.