Uso y estilo de medidor HTML5 [Guía]

Si está familiarizado con la barra de progreso de HTML, que muestra la cantidad de actividad realizada, encontrará que el elemento del medidor es similar a eso: ambos mostrar un valor actual fuera de un valor máximo. Pero a diferencia de la barra de progreso, la barra del medidor no debe usarse para mostrar el progreso.

Se usa para mostrar una valor estático en un rango específico, por ejemplo, puede indicar el espacio de almacenamiento utilizado en un almacenamiento de disco mostrando cuánto espacio de almacenamiento se llena y cuánto no..

Además de eso, el elemento del medidor también se puede usar para visualizar hasta tres regiones dentro de su rango. Reutilizando el ejemplo de espacio de almacenamiento, en lugar de mostrar solo cuánto espacio está ocupado, también puede indicar visualmente si el espacio ocupado está apenas lleno (digamos por debajo del 30%) o casi medio lleno (entre el 30% al 60%) o más de Medio lleno (más del 60%) usando diferentes colores. Esto ayuda a los usuarios a saber cuándo están llegando al límite de almacenamiento..

En este post, te mostraremos. cómo diseñar la barra del medidor para los dos propósitos mencionados, es decir, un calibre simple (sin regiones indicadas) y dos ejemplos de medidores con 3 regiones indicadas por color. Para este último, trabajaremos en creando un indicador de "marcas" por mostrar puntuaciones bajas, medias y buenas, y un indicador de "pH" Para mostrar valores de pH ácidos, neurales y alcalinos..

Atributos

Antes de comenzar con los ejemplos y profundizar, echemos un vistazo rápido a la lista de atributos a continuación, más información sobre estos atributos, como sus valores predeterminados, etc., se tratarán en los ejemplos..

valor - El valor de la metro elemento
min - El valor mínimo del rango del medidor.
max - El valor máximo del rango del medidor.
bajo - Indica el valor límite bajo
alto - Indica el valor límite alto
óptimo - El punto óptimo en el rango.

1. Diseñar un simple indicador

Aquí hay un ejemplo muy simple que usa un solo atributo, el valor. Antes de continuar, necesitamos saber tres cosas primero:

(1) Hay un defecto min y max valor que define el rango de metro, que es 0 y 1 respectivamente. (2) Si el usuario especifica valor no cae dentro de la metro rango, tomará el valor de cualquiera min o max, lo que sea más cercano a. (3) La etiqueta final es obligatoria.

Aquí está la sintaxis:

0.5

Alternativamente, también podemos añadir min y max atributos que proporcionan un rango definido por el usuario como tal:

2. Diseñar el indicador de "marcas"

Primero, necesitamos dividir el rango en tres regiones (izquierda / baja, media, derecha / alta). Esto es bajo y alto Los atributos entran en juego. Así se dividen las tres regiones..

Las tres regiones se forman entre min Y bajo , bajo Y alto y alto Y max.

Ahora es obvio que hay ciertas condiciones. bajo y alto Los valores deben seguir para las tres regiones que se formarán:

bajo no puede ser menor que min y mayor que alto Y max
alto no puede ser mayor que max y menos que bajo Y min.
Y cuando se rompe un criterio tanto bajo y alto tomará el valor de la otra variable en el criterio que no se cumple, es decir, si bajo el valor se encuentra más bajo que min que no debería ser, bajo obtendrá el min valor.

En este ejemplo, consideraremos que nuestras tres regiones de izquierda a derecha son:

Pobre: (0-33)
Promedio: (34-60)
Bueno: (61-100)

Por lo tanto, los siguientes son valores para los atributos; min = "0" bajo = "34" alto = "60" max = "100".

Aquí hay una imagen visualizando las regiones..

Aunque hay tres regiones en el medidor que creamos en este momento, indicará solo dos "tipos" de regiones en solo dos colores en este momento. ¿Por qué? Porque óptimo está en la región media.

Punto óptimo

En cualquier región (de las tres) la óptimo punto se cae, se considera como una "región óptima" coloreada de verde por defecto. La (s) región (es) inmediatamente al lado se llama "región subóptima" y está coloreada de naranja. La que está más alejada es una "región no muy óptima", de color rojo.

Hasta ahora en nuestro ejemplo no hemos asignado un valor para óptimo. Por lo tanto, el valor predeterminado se convierte en 50, lo que hace que la región central sea la "región óptima" y las que están justo al lado (tanto a la izquierda como a la derecha) como "regiones subóptimas".

En resumen, en el caso anterior, cualquier valor a la metro el elemento que cae en la región media se indica con verde; el resto naranja.

Eso no es lo que queremos. Lo queremos coloreado de esta manera: Pobre (rojo), Promedio (naranja), Bueno (verde)

Dado que la región de la derecha debe ser considerada como nuestra región óptima, daremos óptimo un valor que caerá en la región derecha (cualquier valor entre 61-100, incluidos 61 y 100).

Estamos tomando 90 para este ejemplo. Esto hará que la región derecha sea "óptima", la zona intermedia (su próxima región inmediata) "subóptima" y en el extremo izquierdo la región "no mucho de lo óptimo".

Esto es lo que obtendremos en nuestro medidor..

2. Diseñar el indicador de "pH"

Primero, un respiro en los valores de pH. Una solución ácida tiene un pH inferior a 7, una solución alcalina tiene un pH superior a 7 y si caes en 7, es una solución neutra.

Por lo tanto, utilizaremos los siguientes valores y atributos:

bajo = "7" , alto = "7", max = "14", y el min tomará el valor predeterminado de cero.

Antes de agregar el resto de los atributos para completar el código, decidamos los colores: Ácido (rojo), Neutral (blanco y Alcalino (azul). Consideremos también la región ácida (región izquierda por debajo de 7) como "óptima"

Aquí están los pseudo elementos CSS a los que apuntaremos para obtener la imagen visual deseada Firefox. (Para los pseudo elementos del medidor de webkit y más, consulte los enlaces que figuran en "referencia".)

 .ph_meter background: lightgrey; ancho: 300px;  .ph_meter: -moz-meter-óptimo :: - moz-meter-bar fondo: indianred;  .ph_meter: -moz-meter-sub-óptimo :: - moz-meter-bar fondo: antiquewhite;  .ph_meter: -moz-meter-sub-sub-óptimo :: - moz-meter-bar background: steelblue;

Aquí está el código html completo y el resultado final del medidor de pH.

Referencias

Especificaciones del medidor HTML5 W3C
Lista de pseudo elementos y clases de webkit
Lista de pseudo elementos específicos del proveedor

Más sobre Hongkiat: Creación y estilo de la barra de progreso con HTML5