Meter
Metro
Un medidor muestra una medición dentro de un rango conocido. También puede marcar rangos bajos, altos y óptimos.
Meter compares a known value with a bounded scale.
Un ejemplo real
Un panel de almacenamiento muestra 82 GB usados de 100 GB. La marca alta es 80 y el rango óptimo está por debajo de 60. El texto también dice “82 GB de 100 GB”, por lo que el color no es la única advertencia. Una carga utiliza en su lugar una barra de progreso.
Partes principales
- 01Rango conocido
- 02Medición actual
- 03Umbrales y óptimo
Úsalo cuando
Úsalo para un valor actual, como almacenamiento, una puntuación o la intensidad de la señal, cuando los límites tengan un significado real.
No lo uses cuando
No lo uses para el progreso de tareas, un valor sin límite, o un valor que las personas cambian directamente.
Nombre usado en código
meter value min max low high optimum Antes de lanzarlo
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 Metro (Meter). User context: Un panel de almacenamiento muestra 82 GB usados de 100 GB. La marca alta es 80 y el rango óptimo está por debajo de 60. El texto también dice “82 GB de 100 GB”, por lo que el color no es la única advertencia. Una carga utiliza en su lugar una barra de progreso. Recommended pattern: Metro (Meter). Why it fits: Úsalo para un valor actual, como almacenamiento, una puntuación o la intensidad de la señal, cuando los límites tengan un significado real. Do not use it when: No lo uses para el progreso de tareas, un valor sin límite, o un valor que las personas cambian directamente. 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): El estándar cubre únicamente el alcance listado. No elige el estilo visual, la decisión del producto ni el ejemplo de Vibulary. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Revisa esta petición
Review how Metro (Meter) is used now. Definition: Un medidor muestra una medición dentro de un rango conocido. También puede marcar rangos bajos, altos y óptimos. 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.