Progresie

Prezentare generală

Progress expune părțile Base UI instalate: Root, Track, Indicator, Label și Value. Importați-le din twenty-ui/primitives/feedback. Utilizați ProgressBar sau ProgressRing pentru un aspect convenabil cu același contract semantic.

Utilizare

Root gestionează valoarea controlată și semantica accesibilă a barei de progres. Label furnizează numele său accesibil. Value afișează valoarea formatată. Track și Indicator descriu umplerea vizuală; lățimea indicatorului provine din intervalul normalizat al rădăcinii. Părțile nu impun un aspect.

import { Progress } from 'twenty-ui/primitives/feedback';
import { Text } from 'twenty-ui/primitives/typography';

export const ImportProgress = () => (
  <Progress.Root
    value={70}
    min={20}
    max={120}
    style={{
      display: 'grid',
      gridTemplateColumns: '1fr auto',
      alignItems: 'center',
      gap: 8,
      width: 320,
      maxWidth: '100%',
    }}
  >
    <Progress.Label render={<Text />}>Importing records</Progress.Label>
    <Progress.Value render={<Text />} />
    <Progress.Track
      style={{
        gridColumn: '1 / -1',
        height: 8,
        background: 'var(--t-background-tertiary)',
      }}
    >
      <Progress.Indicator
        style={{
          height: '100%',
          background: 'var(--t-font-color-primary)',
        }}
      />
    </Progress.Track>
  </Progress.Root>
);

Acest interval afișează 50%, în timp ce aria-valuenow este 70, aria-valuemin este 20, iar aria-valuemax este 120. Aplicația gestionează cererile, sincronizarea și actualizările de progres. Nu există defaultValue sau avansare automată.

Valori, intervale și progres nedeterminat

Valoarea implicită pentru min este 0, iar cea pentru max este 100. Furnizați limite finite cu min \< max. Valorile finite din afara intervalului sunt limitate pentru valoarea semantică, valoarea formatată și umplerea vizuală. Finalizarea are loc la valoarea maximă. Modificarea intervalului recalculează procentajul fără a modifica valoarea brută furnizată de aplicație. Transmiteți value={null} atunci când cantitatea de progres este necunoscută. Rădăcina are apoi starea nedeterminată, omite aria-valuenow și utilizează indeterminate progress ca text implicit al valorii accesibile. Valorile nefinite rămân, de asemenea, nedeterminate; nu sunt convertite la zero. Indicator brut nu are o lățime procentuală calculată în acea stare, astfel încât compoziția îi alege aspectul nedeterminat.

import { ProgressBar } from 'twenty-ui/primitives/feedback';

export const PendingImport = () => (
  <ProgressBar value={null} aria-label="Preparing the import" />
);

Etichete și formatare

Compuneți Progress.Label în Root sau setați aria-label ori aria-labelledby nativ. Utilizați aria-valuetext pentru o alternativă ușor de înțeles atunci când un procentaj este insuficient. ფორმatorul implicit afișează procentajul normalizat. locale și format păstrează contractul instalat al Intl.NumberFormat; un format explicit formatează valoarea numerică limitată. getAriaValueText(formattedValue, value) primește acel text formatat și valoarea brută a aplicației, inclusiv null. Acesta modifică textul valorii accesibile fără a modifica umplerea.

import { Progress } from 'twenty-ui/primitives/feedback';

export const RecordCount = () => (
  <Progress.Root
    value={600}
    max={1000}
    format={{ style: 'decimal' }}
    getAriaValueText={(formattedValue) => `${formattedValue} of 1,000 records`}
  >
    <Progress.Label>Importing records</Progress.Label>
    <Progress.Value>
      {(formattedValue) => `${formattedValue} / 1,000`}
    </Progress.Value>
  </Progress.Root>
);

Progress.Value primește atât valoarea formatată, cât și valoarea brută prin callbackul său opțional pentru copil. Pentru progresul nedeterminat, callbackul primește indeterminate ca text formatat; fără un callback, partea de valoare nu afișează conținut. Conținutul afișat nu devine automat numele accesibil sau textul valorii accesibile.

Props native, referințe și compoziție

Parte	DOM implicit și ținta referinței
`Root`	`div` extern cu semantică de bară de progres
`Track`	`div` pentru pistă
`Indicator`	`div` pentru umplere
`Label`	`span` pentru etichetă
`Valoare`	`span` pentru valoare

Fiecare parte păstrează props native, referințe și contractul de compoziție render instalat. Redirecționați props și referința furnizate atunci când înlocuiți un element. Callbackurile className, style și render primesc starea publică cu status: progressing, complete sau indeterminate. Atributele de stare pun aceeași stare la dispoziția stilurilor. Punctul de intrare exportă ProgressStatus și tipurile Props și State pentru fiecare parte, inclusiv ProgressRootProps, ProgressRootState, ProgressIndicatorProps și ProgressIndicatorState. Fiecare parte redirecționează gestionarii nativi de evenimente. Aplicațiile gestionează coregrafia funcționalităților și callbackurile de finalizare.

Proprietăți

Progress.Root

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.

ReactNode

Composed Progress parts and supporting content.

string | ((state: ProgressRootState) => string | undefined)

Class applied to this part, or a callback receiving its progress 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 Root.render.

ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ProgressRootState>

Composes this part with an element or render callback. Forward the supplied props and ref to the corresponding DOM element.

CSSProperties | ((state: ProgressRootState) => CSSProperties | undefined)

Inline styles applied to this part, or a callback receiving its progress status.

number | null

obligatoriu

Controlled value in the min/max range. Use null for indeterminate progress.

Progress.Track

ReactNode

The indicator and optional supporting content.

string | ((state: ProgressTrackState) => string | undefined)

Class applied to this part, or a callback receiving its progress status.

Ref<HTMLDivElement>

Ref to the track div, or the element composed through Track.render.

ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ProgressTrackState>

Composes this part with an element or render callback. Forward the supplied props and ref to the corresponding DOM element.

CSSProperties | ((state: ProgressTrackState) => CSSProperties | undefined)

Inline styles applied to this part, or a callback receiving its progress status.

Progress.Indicator

string | ((state: ProgressIndicatorState) => string | undefined)

Class applied to this part, or a callback receiving its progress status.

Ref<HTMLDivElement>

Ref to the indicator div, or the element composed through Indicator.render.

ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ProgressIndicatorState>

Composes this part with an element or render callback. Forward the supplied props and ref to the corresponding DOM element.

CSSProperties | ((state: ProgressIndicatorState) => CSSProperties | undefined)

Inline styles applied to this part, or a callback receiving its progress status.

Progress.Value

((formattedValue: string | null, value: number | null) => ReactNode) | null

Optional callback receiving the formatted value and raw value. Indeterminate progress passes indeterminate as formatted text. Without a callback, indeterminate progress displays no content.

string | ((state: ProgressValueState) => string | undefined)

Class applied to this part, or a callback receiving its progress status.

Ref<HTMLSpanElement>

Ref to the value span, or the element composed through Value.render.

ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ProgressValueState>

Composes this part with an element or render callback. Forward the supplied props and ref to the corresponding DOM element.

CSSProperties | ((state: ProgressValueState) => CSSProperties | undefined)

Inline styles applied to this part, or a callback receiving its progress status.

Progress.Label

ReactNode

Visible text that supplies the accessible name of the root.

string | ((state: ProgressLabelState) => string | undefined)

Class applied to this part, or a callback receiving its progress status.

Ref<HTMLSpanElement>

Ref to the label span, or the element composed through Label.render.

ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ProgressLabelState>

Composes this part with an element or render callback. Forward the supplied props and ref to the corresponding DOM element.

CSSProperties | ((state: ProgressLabelState) => CSSProperties | undefined)

Inline styles applied to this part, or a callback receiving its progress status.

Dezvoltatori

Aplicații

API

Autogazda

Contribuie

Biblioteca UI

Prezentare generală

Utilizare

Valori, intervale și progres nedeterminat

Etichete și formatare

Props native, referințe și compoziție

Proprietăți

Progress.Root

Progress.Track

Progress.Indicator

Progress.Value

Progress.Label

​Prezentare generală

​Utilizare

​Valori, intervale și progres nedeterminat

​Etichete și formatare

​Props native, referințe și compoziție

​Proprietăți

​Progress.Root

​Progress.Track

​Progress.Indicator

​Progress.Value

​Progress.Label

Prezentare generală

Utilizare

Valori, intervale și progres nedeterminat

Etichete și formatare

Props native, referințe și compoziție

Proprietăți

Progress.Root

Progress.Track

Progress.Indicator

Progress.Value

Progress.Label