Resumen
ProgressBar proporciona una apariencia horizontal para Progreso. Preserva el contrato completo del elemento raíz, incluidos los atributos nativos, las referencias, la composición de renderizado, el formato, los rangos personalizados y el progreso indeterminado. Asígnale un aria-label que identifique la operación.
”Uso”
Propiedad del estado y rangos
value es obligatorio y está controlado por la aplicación. No hay modo defaultValue. El componente no inicia una solicitud ni avanza el progreso por sí solo. Pasa null cuando se desconozca el progreso. Los valores no finitos también permanecen indeterminados.
min toma de forma predeterminada el valor 0 y max, el valor 100. Los valores finitos se limitan al rango para el valor semántico y el relleno normalizado. Un valor de 70 en el rango de 20 a 120 llena la mitad de la barra e indica 50%, mientras que aria-valuenow se mantiene en 70.
Usa aria-valuetext, getAriaValueText, locale y format como se describe en Progreso. Usa partes de Progress compuestas cuando las etiquetas y los valores necesiten su propio diseño visible.
Usa Toast para notificaciones con una cuenta regresiva de descarte y pausa al pasar el cursor.
Apariencia y composición
size selecciona una pista de 6 px u 8 px. barColor y backgroundColor aceptan colores CSS, incluidas las variables de tema. withBorderRadius redondea la pista y el indicador. withMinimumFillWidth mantiene un pequeño relleno estético solo entre el mínimo y la finalización. Este mínimo es de como máximo 12 px y la mitad del ancho de la pista, por lo que una pista estrecha sigue distinguiendo el progreso incompleto de la finalización. No llena una barra vacía ni cambia los valores semánticos.
Los atributos nativos, className, style y ref se dirigen a la raíz. className y style pueden recibir el estado del progreso. render puede reemplazar la raíz y conservar su semántica. El progreso indeterminado tiene su propia apariencia sin indicar un porcentaje numérico. Las preferencias de movimiento reducido desactivan las transiciones de relleno y el movimiento indeterminado.
Compón partes de Progress para diseños personalizados o animación específica. La temporización específica, la aparición gradual, los destellos, los resortes y las devoluciones de llamada de finalización pertenecen a la composición de la aplicación.
Migración
ReemplazaariaLabel por el atributo nativo aria-label. Se eliminan las props withGrowIn, withGlint, withSpringFill y onGrowInComplete. Implementa su apariencia, temporización y devoluciones de llamada de finalización en una composición de la aplicación mediante partes de Progress. El atributo nativo onAnimationEnd sigue disponible en la raíz.
”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
predeterminado:"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
predeterminado:"100"
Inclusive maximum. Defaults to 100.
number
predeterminado:"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"
predeterminado:"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
requerido
Controlled value in the min/max range. Use null for indeterminate progress.
boolean
predeterminado:"false"
Rounds the track and indicator corners.
boolean
predeterminado:"true"
Applies a cosmetic minimum of up to 12px, capped at half the track width, only above the minimum and below completion.