Обзор
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.