Avanzamento

Panoramica

Progress espone le parti Base UI installate: Root, Track, Indicator, Label e Value. Importale da twenty-ui/primitives/feedback. Usa ProgressBar o ProgressRing per un aspetto pratico con lo stesso contratto semantico.

Utilizzo

Root gestisce il valore controllato e la semantica accessibile della barra di avanzamento. Label fornisce il relativo nome accessibile. Value visualizza il valore formattato. Track e Indicator descrivono il riempimento visivo; la larghezza dell’indicatore deriva dall’intervallo normalizzato della radice. Le parti non impongono un aspetto.

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>
);

Questo intervallo visualizza 50%, mentre aria-valuenow è 70, aria-valuemin è 20 e aria-valuemax è 120. L’applicazione gestisce le richieste, la tempistica e gli aggiornamenti dell’avanzamento. Non sono presenti defaultValue né un avanzamento automatico.

Valori, intervalli e avanzamento indeterminato

min è impostato per impostazione predefinita su 0 e max su 100. Fornisci limiti finiti con min \< max. I valori finiti esterni all’intervallo vengono limitati per il valore semantico, il valore formattato e il riempimento visivo. Il completamento avviene al valore massimo. La modifica dell’intervallo ricalcola la percentuale senza modificare il valore non elaborato fornito dall’applicazione. Passa value={null} quando la quantità di avanzamento è sconosciuta. La radice ha quindi uno stato indeterminato, omette aria-valuenow e usa indeterminate progress come testo predefinito del valore accessibile. Anche i valori non finiti restano indeterminati; non vengono convertiti in zero. In tale stato, l’elemento Indicator non elaborato non ha una larghezza percentuale calcolata, pertanto la composizione sceglie il relativo aspetto indeterminato.

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

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

Etichette e formattazione

Componi Progress.Label all’interno di Root oppure imposta aria-label o aria-labelledby nativi. Usa aria-valuetext per un’alternativa leggibile dall’utente quando una percentuale non è sufficiente. Il formattatore predefinito visualizza la percentuale normalizzata. locale e format mantengono il contratto Intl.NumberFormat installato; un format esplicito formatta il valore numerico limitato. getAriaValueText(formattedValue, value) riceve quel testo formattato e il valore non elaborato dell’applicazione, incluso null. Modifica il testo del valore accessibile senza modificare il riempimento.

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 riceve sia il valore formattato sia il valore non elaborato tramite il callback figlio facoltativo. Per l’avanzamento indeterminato, il callback riceve indeterminate come testo formattato; senza callback, la parte del valore non visualizza alcun contenuto. Il contenuto visualizzato non diventa automaticamente il nome accessibile o il testo del valore accessibile.

Proprietà native, ref e composizione

Parte	DOM predefinito e destinazione del ref
`Root`	`div` esterno con semantica della barra di avanzamento
`Track`	`div` della traccia
`Indicator`	`div` di riempimento
`Label`	`span` dell’etichetta
`Valore`	`span` del valore

Ogni parte conserva le proprietà native, i ref e il contratto di composizione render installato. Inoltra le proprietà e il ref forniti quando sostituisci un elemento. I callback className, style e render ricevono lo stato pubblico con status: progressing, complete o indeterminate. Gli attributi di stato rendono lo stesso stato disponibile agli stili. Il punto di ingresso esporta ProgressStatus e i tipi Props e State per ogni parte, inclusi ProgressRootProps, ProgressRootState, ProgressIndicatorProps e ProgressIndicatorState. Ogni parte inoltra i gestori di eventi nativi. Le applicazioni gestiscono l’orchestrazione delle funzionalità e i callback di completamento.

Props

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

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 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

obbligatorio

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.

Sviluppatori

App

API

Auto-ospitazione

Contribuire

Libreria UI

Panoramica

Utilizzo

Valori, intervalli e avanzamento indeterminato

Etichette e formattazione

Proprietà native, ref e composizione

Props

Progress.Root

Progress.Track

Progress.Indicator

Progress.Value

Progress.Label

​Panoramica

​Utilizzo

​Valori, intervalli e avanzamento indeterminato

​Etichette e formattazione

​Proprietà native, ref e composizione

​Props

​Progress.Root

​Progress.Track

​Progress.Indicator

​Progress.Value

​Progress.Label

Panoramica

Utilizzo

Valori, intervalli e avanzamento indeterminato

Etichette e formattazione

Proprietà native, ref e composizione

Props

Progress.Root

Progress.Track

Progress.Indicator

Progress.Value

Progress.Label