Meter
Capacidade
import { Meter } from '@rivocode/ui'Quando usar
Medida de quanto de uma capacidade esta em uso: espaço, cota, limite.
<Meter value={72} max={100} label="Espaco de arquivos" showValue />
showValue mostra o valor ao lado do rótulo, e format diz como ele é escrito:
o nome de um formatador da casa (percent, currencyShort, compact) ou uma
função sua. Sem rótulo visível, passe aria-label.
Movimento
A barra enche do zero na montagem (animate-fill, --rc-duration-slow), o mesmo do Progress, e depois anda pela largura quando o valor muda. Com "reduzir movimento", nasce no valor.
Quando não usar
Para tarefa que anda e termina (enviar um arquivo, gerar um relatório), use
Progress. Parece a mesma barra e não é. O progresso caminha para um fim; a
medida fica parada mostrando um estado que pode subir e descer.
Trocar um pelo outro faz o leitor de tela anunciar "carregando" para algo que não carrega, e quem ouve fica esperando o fim de uma operação que não existe.
No React Native
Portado. A diferença é o texto do valor: no web ele sai de format, e no nativo vai pronto em valueLabel: trazer a tabela de formatadores custaria o Intl num bundle de celular. O papel de acessibilidade também muda, e por uma razão: o React Native não tem equivalente de meter, então a peça se anuncia como texto com valor, e nunca como progressbar, que é justamente o erro que ela existe para evitar.
API
| Prop | Tipo |
|---|---|
valueobrigatória0.4.0The current value. | number |
aria-valuetext0.4.0A string value that provides a user-friendly name for `aria-valuenow`, the current value of the meter. | 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.0A function that returns a string value that provides a human-readable text alternative for `aria-valuenow`, the current value of the meter. | ((formattedValue: string, value: number) => string) |
label0.4.0 | 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, MeterRootState>ReactElement<unknown, stringJSXElementConstructor<any>> |
showValue0.4.0 | boolean |
Além destas, a peça aceita className, style, id e children, repassados ao elemento de baixo.