Resumen
MetricRow alinea una etiqueta, un icono opcional y un valor con formato previo. Un ProgressRing opcional usa la etiqueta visible como su nombre accesible.
Uso
value. Añade progress cuando la métrica tenga un porcentaje conocido.
La aplicación gestiona los cálculos, las unidades, el formato de los números y el significado de la métrica. progressColor acepta un color CSS para el arco relleno.
Valores sin progreso
Omiteprogress para mostrar un valor simple. El cero numérico se muestra como 0; el contenido nunca se reemplaza por un marcador de posición. Proporciona tu propio marcador de posición cuando los datos no estén disponibles.
Composición y accesibilidad
El contenido de la etiqueta acepta nodos. Su texto accesible nombra el anillo de progreso mediantearia-labelledby, incluido el texto anidado. Proporciona una etiqueta visible significativa. Un valor de cadena no vacío también se expone como su texto de valor accesible. Para el contenido de valores con formato, proporciona progressValueText cuando un porcentaje no describa completamente la métrica. Este texto reemplaza el valor alternativo de cadena. Sin él, otro contenido conserva el texto de valor porcentual del anillo. Un progressValueText vacío también usa el porcentaje, incluso cuando value es una cadena. El nodo opcional startIcon es decorativo. Quien realiza la llamada controla sus dimensiones y trazo.
startIcon={IconDatabase} por startIcon={<IconDatabase size={14} />}. La aplicación mantiene los valores con formato previo.
Los atributos nativos, className, style y ref se aplican a la fila exterior. render puede reemplazar ese elemento. El progreso permanece controlado y limitado de 0 a 100, con el mismo comportamiento de movimiento reducido que ProgressRing.
”Props”
ReactNode
requerido
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
requerido
Preformatted value displayed at the end of the row. Nonempty string values also supply the progress ring accessible value text.