Meter
Medidor
Um medidor exibe uma medição dentro de um intervalo conhecido. Ele também pode marcar os intervalos baixo, alto e ideal.
Meter compares a known value with a bounded scale.
Um exemplo real
Um painel de armazenamento mostra 82 GB usados de 100 GB. A marca alta é 80 e a melhor faixa está abaixo de 60. O texto também diz “82 GB de 100 GB”, então a cor não é o único alerta. Um envio usa uma barra de progresso em vez disso.
Partes principais
- 01intervalo conhecido
- 02Medição atual
- 03Limiar e ótimo
Use-o quando
Use-o para um valor atual, como armazenamento, pontuação ou intensidade do sinal, quando os limites tiverem significado real.
Não o use quando
Não o use para progresso de tarefas, um valor sem limite ou um valor que as pessoas podem alterar diretamente.
Nome usado no código
meter value min max low high optimum Antes de lançar
Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states.
Outcome: Complete the task with Medidor (Meter). User context: Um painel de armazenamento mostra 82 GB usados de 100 GB. A marca alta é 80 e a melhor faixa está abaixo de 60. O texto também diz “82 GB de 100 GB”, então a cor não é o único alerta. Um envio usa uma barra de progresso em vez disso. Recommended pattern: Medidor (Meter). Why it fits: Use-o para um valor atual, como armazenamento, pontuação ou intensidade do sinal, quando os limites tiverem significado real. Do not use it when: Não o use para progresso de tarefas, um valor sem limite ou um valor que as pessoas podem alterar diretamente. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): O padrão cobre apenas o escopo listado. Ele não escolhe o estilo visual, decisão do produto ou exemplo de Vibulary. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Conferir este pedido
Review how Medidor (Meter) is used now. Definition: Um medidor exibe uma medição dentro de um intervalo conhecido. Ele também pode marcar os intervalos baixo, alto e ideal. Release checks: Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.