Panoramica
MetricRow allinea un’etichetta, un’icona facoltativa e un valore preformattato. Un elemento facoltativo ProgressRing utilizza l’etichetta visibile come nome accessibile.
Utilizzo
value. Aggiungi progress quando la metrica ha una percentuale nota.
L’applicazione gestisce i calcoli, le unità, la formattazione dei numeri e il significato della metrica. progressColor accetta un colore CSS per l’arco riempito.
Valori senza avanzamento
Omettiprogress per mostrare un valore semplice. Lo zero numerico viene visualizzato come 0; il contenuto non viene mai sostituito con un segnaposto. Fornisci un segnaposto personalizzato quando i dati non sono disponibili.
Composizione e accessibilità
Il contenuto dell’etichetta accetta nodi. Il relativo testo accessibile assegna un nome all’anello di avanzamento tramitearia-labelledby, incluso il testo annidato. Fornisci un’etichetta visibile significativa. Un valore stringa non vuoto viene inoltre esposto come testo del valore accessibile. Per il contenuto del valore formattato, fornisci progressValueText quando una percentuale non descrive completamente la metrica. Questo testo sostituisce il valore di fallback della stringa. Senza di esso, gli altri contenuti mantengono il testo del valore percentuale dell’anello. Un progressValueText vuoto utilizza anch’esso la percentuale, anche quando value è una stringa. Il nodo startIcon facoltativo è decorativo. Il chiamante ne controlla le dimensioni e il tratto.
startIcon={IconDatabase} con startIcon={<IconDatabase size={14} />}. I valori rimangono preformattati dall’applicazione.
Gli attributi nativi, className, style e ref si applicano alla riga esterna. render può sostituire quell’elemento. L’avanzamento rimane controllato e limitato da 0 a 100, con lo stesso comportamento per la riduzione del movimento di ProgressRing.
Props
ReactNode
obbligatorio
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
obbligatorio
Preformatted value displayed at the end of the row. Nonempty string values also supply the progress ring accessible value text.