Panoramica
ProgressBar fornisce un aspetto orizzontale per Progress. Preserva il contratto completo della radice, inclusi attributi nativi, refs, composizione di rendering, formattazione, intervalli personalizzati e avanzamento indeterminato. Assegna un aria-label che identifichi l’operazione.
Utilizzo
Proprietà dello stato e intervalli
value è obbligatorio ed è controllato dall’applicazione. Non esiste una modalità defaultValue. Il componente non avvia una richiesta né fa avanzare autonomamente lo stato di avanzamento. Passa null quando lo stato di avanzamento è sconosciuto. Anche i valori non finiti rimangono indeterminati.
min è impostato per impostazione predefinita su 0 e max su 100. I valori finiti vengono limitati all’intervallo per il valore semantico e il riempimento normalizzato. Un valore di 70 nell’intervallo da 20 a 120 riempie metà della barra e indica 50%, mentre aria-valuenow rimane 70.
Usa aria-valuetext, getAriaValueText, locale e format come descritto in Stato di avanzamento. Usa parti di Progress composte quando etichette e valori necessitano di un proprio layout visibile.
Usa Toast per le notifiche con un conto alla rovescia per la chiusura e la pausa al passaggio del mouse.
Aspetto e composizione
size seleziona una traccia di 6px o 8px. barColor e backgroundColor accettano colori CSS, incluse le variabili del tema. withBorderRadius arrotonda la traccia e l’indicatore. withMinimumFillWidth mantiene un piccolo riempimento estetico solo tra il minimo e il completamento. Questo minimo è al massimo di 12px e pari a metà della larghezza della traccia, quindi una traccia stretta distingue comunque lo stato di avanzamento incompleto dal completamento. Non riempie una barra vuota né modifica i valori semantici.
Gli attributi nativi, className, style e ref hanno come destinazione la radice. className e style possono ricevere lo stato di avanzamento. render può sostituire la radice preservandone la semantica. Lo stato di avanzamento indeterminato ha un proprio aspetto senza indicare una percentuale numerica. Le preferenze per la riduzione del movimento disabilitano le transizioni di riempimento e il movimento indeterminato.
Componi le parti di Progress per layout personalizzati o animazioni specifiche. La temporizzazione delle funzionalità, l’espansione iniziale, i bagliori, le molle e le callback di completamento appartengono alla composizione dell’applicazione.
Migrazione
SostituisciariaLabel con il aria-label nativo. Le props withGrowIn, withGlint, withSpringFill e onGrowInComplete vengono rimosse. Implementa il relativo aspetto, la temporizzazione e le callback di completamento in una composizione dell’applicazione usando le parti di Progress. Il onAnimationEnd nativo rimane disponibile sulla radice.
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
predefinito:"none"
CSS background color of the track.
string
CSS color of the filled bar. Defaults to the primary text color.
ReactNode
Additional Progress parts or supporting content inside the root.
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"
Bar height: sm (6px) or md (8px).
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.
boolean
predefinito:"false"
Rounds the track and indicator corners.
boolean
predefinito:"true"
Applies a cosmetic minimum of up to 12px, capped at half the track width, only above the minimum and below completion.