Panoramica
ProgressRing fornisce un aspetto circolare per Progress. Condivide il contratto del componente radice relativo a intervallo personalizzato, null, formattazione, etichettatura, prop nativa, ref e render. I figli facoltativi visualizzano un valore preformattato accanto all’anello.
Utilizzo
Fornisci il valore controllato non elaborato e un nome accessibile. Usaaria-valuetext quando un valore formattato spiega l’avanzamento più chiaramente di una percentuale.
aria-labelledby per associare l’anello a un’etichetta visibile esistente oppure componi Progress.Label come figlio. I figli preformattati non forniscono automaticamente il nome accessibile dell’anello.
Avanzamento e intervalli controllati
L’applicazione calcolavalue e formatta il contenuto visualizzato. L’anello non recupera dati, non fa avanzare l’avanzamento né calcola quote. Il valore predefinito di min è 0 e quello di max è 100. I valori finiti vengono limitati all’intervallo per i valori semantici e la geometria dell’arco. L’arco si riempie in base alla percentuale normalizzata, anche quando il minimo non è zero.
Passa value={null} per l’avanzamento indeterminato. L’anello omette aria-valuenow e visualizza un arco indeterminato. Anche i valori non finiti rimangono indeterminati; non diventano zero né completamento. Il contenuto visualizzato rimane controllato dall’applicazione.
Usa locale, format e getAriaValueText come descritto in Progress. Componi Progress.Value per visualizzare il valore formattato del componente radice.
Usa ProgressBar per l’avanzamento orizzontale oppure MetricRow per un’etichetta e un valore allineato.
Aspetto e composizione
size="md" visualizza un anello di 16px; size="sm" visualizza un anello di 14px. Entrambi usano un tratto di 2px e si riempiono in senso orario dall’alto. barColor accetta colori CSS, incluse le variabili del tema. L’SVG è decorativo e nascosto alle API di accessibilità.
Le modifiche del valore vengono animate per 300ms. Le preferenze per la riduzione del movimento disabilitano la transizione e la rotazione indeterminata. Gli attributi nativi, className, style e ref si applicano all’elemento di avanzamento esterno. className e style possono ricevere lo stato di avanzamento. render può sostituire il componente radice mantenendone la semantica.
Props
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
predefinito:"100"
Inclusive maximum. Defaults to 100.
number
predefinito:"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"
predefinito:"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
obbligatorio
Controlled value in the min/max range. Use null for indeterminate progress.