Meter
Medidor que mostra uma medida dentro de uma faixa conhecida, como o armazenamento usado, as vagas ocupadas ou a força de uma senha. Para uma tarefa que caminha até terminar, como um envio, use o Progress.
Instalação
Configure o Camaleo uma vez (Instalação) e importe o que precisar. O estilo carregado cuida do visual.
import { Meter } from "@camaleo/react";Anatomia
Uma raiz com um cabeçalho (rótulo e valor) e um trilho com o preenchimento. Cada parte tem um data-slot que você pode usar no CSS.
Exemplos
Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor escolhidos na barra acima.
Meter: quanto algo está cheio
Progress: quanto de uma tarefa já foi feito
Meter ou Progress?
O Meter diz quanto algo está cheio, e o valor pode subir ou descer. O Progress diz quanto de uma tarefa já foi feito, e só anda para a frente.
Tons para o status
Use brand quando está tudo bem, warning quando chega perto do limite e danger quando a pessoa precisa agir. Diga isso no texto também, não só na cor.
Avise antes de encher
Clique para adicionar arquivos. Escolha o tom a partir do valor: o medidor fica warning em 75% e danger quando a caixa enche.
Na unidade de verdade
Use o limite real em max e mostre "8.450 de 10.000". As pessoas pensam em usuários e gigabytes, não em porcentagem.
Vagas, por extenso
Com o getAriaValueText, o leitor de tela fala "7 de 10 vagas em uso" em vez de "70 por cento".
Uma faixa que não começa no zero
Use min e max para escalas como temperatura. O preenchimento mostra onde 24 °C fica entre 16 e 32.
Armazenamento
Arquivos, fotos e e-mails dividem seus 15 GB.
Numa linha de configurações
Coloque o medidor ao lado da ação que resolve. "Liberar espaço" perto do número poupa a pessoa de procurar.
Em contexto
O medidor fica onde a pessoa confere os limites dela. São pedaços inteiros de interface para copiar, no estilo que você escolheu.
Vagas da equipe
Seu plano Pro inclui 20 vagas.
Crie uma senha
Use pelo menos 12 caracteres, com números e símbolos.
Recursos do servidor
Boas práticas
Espaço em disco, vagas, e-mails do mês: um valor e um máximo conhecido.
Um envio é uma tarefa com fim. Use o Progress, para o leitor de tela anunciar uma barra de progresso.
"85 de 100 conexões" diz quanto espaço ainda sobra.
85 o quê? Porcentagem, megabytes ou usuários? A pessoa não sabe se deve se preocupar.
Props
brand quando está tudo bem, warning perto do limite, danger quando é preciso agir.min e max.As outras props da raiz do medidor do Base UI e os atributos nativos de <div> passam direto.
Styling hooks
Atributos
Tokens que ele lê
Cor
Forma e tamanho
Tipografia e movimento
Só deste componente
Acessibilidade
- Renderiza role="meter" com aria-valuenow, aria-valuemin e aria-valuemax, e o rótulo vira o nome acessível.
- Por padrão, o leitor de tela ouve a porcentagem. O valueLabel muda só o texto visível, então passe o getAriaValueText com as mesmas palavras.
- A cor nunca é o único sinal: coloque o status ("Quase cheia") no texto do valor.
- O preenchimento mantém contraste de pelo menos 3:1 com o trilho nos 13 estilos, claro e escuro.