Prezentare generală
ProgressBar oferă un aspect orizontal pentru Progress. Păstrează contractul complet al rădăcinii, inclusiv atributele native, referințele, compunerea randării, formatarea, intervalele personalizate și progresul nedeterminat. Oferiți-i un aria-label care identifică operațiunea.
Utilizare
Proprietatea asupra stării și intervalele
value este obligatoriu și controlat de aplicație. Nu există un mod defaultValue. Componenta nu pornește o solicitare și nu avansează progresul de una singură. Transmiteți null când progresul este necunoscut. Valorile nefinite rămân, de asemenea, nedeterminate.
min are implicit valoarea 0, iar max are implicit valoarea 100. Valorile finite sunt limitate la interval pentru valoarea semantică și umplerea normalizată. O valoare de 70 în intervalul de la 20 la 120 umple jumătate din bară și raportează 50%, în timp ce aria-valuenow rămâne 70.
Utilizați aria-valuetext, getAriaValueText, locale și format după cum este descris în Progres. Utilizați părți Progress compuse când etichetele și valorile necesită propria lor dispunere vizibilă.
Utilizați Toast pentru notificări cu numărătoare inversă pentru închidere și pauză la trecerea cursorului.
Aspect și compoziție
size selectează o pistă de 6 px sau de 8 px. barColor și backgroundColor acceptă culori CSS, inclusiv variabile de temă. withBorderRadius rotunjește pista și indicatorul. withMinimumFillWidth păstrează o mică umplere cosmetică doar între minim și finalizare. Acest minim este de cel mult 12 px și jumătate din lățimea pistei, astfel încât o pistă îngustă distinge în continuare progresul incomplet de finalizare. Nu umple o bară goală și nu modifică valorile semantice.
Atributele native, className, style și ref vizează rădăcina. className și style pot primi starea progresului. render poate înlocui rădăcina păstrându-i semantica. Progresul nedeterminat are propriul aspect fără a raporta un procent numeric. Preferințele pentru mișcare redusă dezactivează tranzițiile de umplere și mișcarea nedeterminată.
Compuneți părți Progress pentru dispuneri personalizate sau animații ale funcționalităților. Temporizarea funcționalităților, creșterea la apariție, sclipirile, arcurile și apelurile inverse la finalizare aparțin compoziției aplicației.
Migrare
ÎnlocuițiariaLabel cu aria-label nativ. Proprietățile withGrowIn, withGlint, withSpringFill și onGrowInComplete sunt eliminate. Implementați aspectul, temporizarea și apelurile inverse la finalizare în compoziția unei aplicații folosind părți Progress. onAnimationEnd nativ rămâne disponibil în rădăcină.
Proprietăți
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
implicit:"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
implicit:"100"
Inclusive maximum. Defaults to 100.
number
implicit:"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"
implicit:"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
obligatoriu
Controlled value in the min/max range. Use null for indeterminate progress.
boolean
implicit:"false"
Rounds the track and indicator corners.
boolean
implicit:"true"
Applies a cosmetic minimum of up to 12px, capped at half the track width, only above the minimum and below completion.