Progress
Com rótulo
import { Progress } from '@rivocode/ui'Quando usar
Barra de progresso de tarefa com fim conhecido: enviar arquivo, gerar relatório.
Sem value ela vira indeterminada; nesse caso prefira o Spinner, que ocupa
menos e não promete um fim que ninguém sabe medir.
format escreve o número do showValue: o nome de um formatador da casa, ou
uma função sua.
Movimento
A barra enche do zero na montagem, pela escala horizontal a partir da esquerda (animate-fill, --rc-duration-slow), e depois anda até cada valor novo pela largura. O indeterminado troca a entrada pelo vaivem dele. Com "reduzir movimento", a barra nasce no valor.
Quando não usar
Para quanto de uma capacidade está em uso (espaço em disco, cota de notas do
mês, limite de crédito), use Meter. A diferença não é de aparência, é do que
o número faz: o progresso anda para o fim e termina, a medida fica parada e pode
subir e descer.
Trocar um pelo outro chega ao leitor de tela: a barra de progresso é anunciada como algo que carrega, e "carregando 72%" para um disco que não está carregando nada faz quem ouve esperar por um fim que nunca vem.
No React Native
Traduz: o @rivocode/ui-native exporta Progress - value de 0 a 100 e label; sem format; a barra anda até o valor novo. A API não é a mesma do web (no nativo tudo é controlado), e a tabela de paridade diz o que muda peça a peça.
API
| Prop | Tipo |
|---|---|
valueobrigatória0.4.0The current value. | number | null |
aria-valuetext0.4.0A string value that provides a user-friendly name for `aria-valuenow`, the current value of the progress bar. | string |
classNames0.5.0Classe por parte: `label`, `value`, `track`, `indicator`. | Partial<Record<"indicator""label""track""value", string>> |
format0.4.0Como o numero e escrito: nome de formatador da casa (`percent`, `currencyShort`, `integer`...) ou funcao propria. | Format |
getAriaValueText0.4.0Accepts a function which returns a string value that provides a human-readable text alternative for the current value of the progress bar. | ((formattedValue: string, value: number | null) => string) |
label0.4.0Texto acima da barra. | ReactNode |
locale0.4.0The locale used by `Intl.NumberFormat` when formatting the value. | LocalesArgument |
max0.4.0The maximum value. | number |
min0.4.0The minimum value. | number |
numberFormat0.5.0As opcoes do `Intl.NumberFormat`, para quem precisa delas. | NumberFormatOptions |
render0.4.0Allows you to replace the component's HTML element with a different tag, or compose it with another component. | ComponentRenderFn<HTMLProps, ProgressRootState>ReactElement<unknown, stringJSXElementConstructor<any>> |
showValue0.4.0Mostra a porcentagem ao lado do rotulo. | boolean |
Além destas, a peça aceita className, style, id e children, repassados ao elemento de baixo.