Prezentare generală
ProgressRing oferă un aspect circular pentru Progress. Acesta partajează contractul componentei rădăcină pentru intervalul personalizat, null, formatare, etichetare, proprietatea nativă, ref și render. Elementele copil opționale afișează o valoare preformatată lângă inel.
Utilizare
Furnizați valoarea brută controlată și un nume accesibil. Utilizațiaria-valuetext atunci când o valoare formatată explică progresul mai clar decât un procentaj.
aria-labelledby pentru a asocia inelul cu o etichetă vizibilă existentă sau compuneți Progress.Label ca element copil. Elementele copil preformatate nu furnizează automat numele accesibil al inelului.
Progres și intervale controlate
Aplicația calculeazăvalue și formatează conținutul afișat. Inelul nu preia date, nu avansează progresul și nu calculează cote. min are implicit valoarea 0, iar max are implicit valoarea 100. Valorile finite sunt limitate la interval pentru valorile semantice și geometria arcului. Arcul se umple în funcție de procentajul normalizat, inclusiv când minimul nu este zero.
Transmiteți value={null} pentru progres nedeterminat. Inelul omite aria-valuenow și afișează un arc nedeterminat. Valorile nefinite rămân, de asemenea, nedeterminate; nu devin zero sau finalizare. Conținutul afișat rămâne controlat de aplicație.
Utilizați locale, format și getAriaValueText conform descrierii din Progress. Compuneți Progress.Value pentru a afișa valoarea formatată a componentei rădăcină.
Utilizați ProgressBar pentru progres orizontal sau MetricRow pentru o etichetă și o valoare aliniată.
Aspect și compunere
size="md" redă un inel de 16px; size="sm" redă un inel de 14px. Ambele utilizează un contur de 2px și se umplu în sensul acelor de ceasornic, pornind de sus. barColor acceptă culori CSS, inclusiv variabile de temă. SVG-ul este decorativ și ascuns din API-urile de accesibilitate.
Modificările valorii sunt animate timp de 300ms. Preferințele pentru mișcare redusă dezactivează tranziția și rotația nedeterminată. Atributele native, className, style și ref vizează elementul extern de progres. className și style pot primi starea progresului. render poate înlocui componenta rădăcină păstrându-i semantica.
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
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
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"
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
obligatoriu
Controlled value in the min/max range. Use null for indeterminate progress.