A tag meter

A tag meter é usada para exibir um determinado valor de forma esteticamente agradável.

A aparência da tag é uma barra parcialmente ou totalmente preenchida. A barra pode ser verde, amarela ou vermelha (a cor da barra depende dos valores dos atributos, sobre isso será explicado abaixo):

A tag meter deve ser usada, por exemplo, na seguinte situação: você quer exibir na tela o valor atual da temperatura, sendo que a temperatura pode variar de 0 a 100. Você deve especificar os seguintes atributos: o atributo value deve indicar o valor atual da temperatura, o atributo min - o valor mínimo possível (no nosso caso 0), o atributo max - o valor máximo possível (no nosso caso 100).

Dependendo do valor do atributo value a barra será pequena ou grande. Se especificar value com o valor 10, a barra será pequena (pois 10 está muito próximo do mínimo - zero), mas se especificar o valor 90, a barra será grande (pois 90 está próximo do máximo - 100). Se especificar o valor 100 - a barra ocupará todo o elemento (pois o valor atingiu o máximo).

Se especificar um valor maior que 100, a barra ocupará todo o elemento mesmo assim. Se especificar 0 ou menos - a barra não aparecerá.

Exemplo

O valor do atributo value é pequeno:

:

Exemplo

O valor do atributo value é grande:

:

Exemplo

O valor do atributo value é médio:

:

Exemplo

O valor do atributo value é igual ao máximo:

:

Exemplo

O valor do atributo value é igual ao mínimo:

:

Exemplo

O valor do atributo value é maior que o máximo:

:

Exemplo

O valor do atributo value é menor que o mínimo:

:

Adicionando os atributos low e high

Na tag meter existem mais 2 atributos: low e high.

Vamos analisar o funcionamento deles usando o exemplo da temperatura. Lembrando que nossa temperatura mínima é 0, e a máxima - 100. Suponha agora que queremos definir os seguintes intervalos - "temperatura fria" de 0 a 20, "normal" de 20 a 80 e "quente" de 80 a 100.

Para definir a temperatura fria, especificaremos o valor do atributo low como o número 20. Assim, de zero (este é o valor do atributo min) até 20 (valor do atributo low) teremos a área de valores baixos.

Para definir a temperatura quente, especificaremos o valor do atributo high como o número 80. Assim, de 80 (este é o valor do atributo high) até 100 (valor do atributo max) teremos a área de valores altos .

A temperatura normal será de 20 (este é o valor do atributo low) até 80 (valor do atributo high). Esta área será chamada de área de valores normais.

Agora, dependendo de em qual área o valor do atributo value se enquadra, a barra será colorida em verde ou amarelo. Será verde se estivermos na área de valores normais, e amarelo - se estiver na área de valores altos ou baixos.

Exemplo

O valor do atributo value está na área de valores baixos:

:

Exemplo

O valor do atributo value está na área de valores normais:

:

Exemplo

O valor do atributo value está na área de valores altos:

:

Adicionando o atributo optimum

O atributo optimum define o valor ideal. Para o nosso exemplo, a temperatura ideal pode ser a fria, a normal ou a quente - conforme sua escolha. Suponha que você especifique que a temperatura ideal é a fria. Agora, dependendo do valor do atributo value (ou seja, da temperatura atual) a cor da barra será verde, amarela ou vermelha.

Se a temperatura atual estiver na área de temperaturas ideais (e especificamos que a ideal é a fria), então a cor da barra será verde. Se a temperatura atual estiver no intervalo adjacente ao ideal (no nosso caso, a temperatura normal), então a barra ficará amarela. Se a temperatura atual estiver em um intervalo não adjacente ao ideal (no nosso caso, a temperatura quente), então a barra ficará vermelha.

Da mesma forma, tudo ocorrerá se a temperatura ideal for especificada como quente. Neste caso, se a temperatura atual estiver na área de temperaturas quentes - a barra será verde, se estiver na área de temperaturas normais - amarela, se estiver na área de temperaturas frias - vermelha.

Se a ideal for especificada como temperatura normal, então a barra só pode ser verde (se a temperatura atual estiver na normal) ou amarela (se a temperatura atual estiver no intervalo adjacente ao normal, que são as temperaturas quente ou fria).

Para especificar qual intervalo é o ideal, é necessário especificar como valor do atributo optimum qualquer número desse intervalo.

Nos exemplos abaixo, o valor do atributo optimum está na área de valores baixos (ou seja, temperaturas frias).

Exemplo

O valor do atributo value está na área de valores baixos:

:

Exemplo

O valor do atributo value está na área de valores normais:

:

Exemplo

O valor do atributo value está na área de valores altos:

:

Nos exemplos abaixo, o valor do atributo optimum está na área de valores altos (ou seja, temperaturas quentes).

Exemplo

O valor do atributo value está na área de valores baixos:

:

Exemplo

O valor do atributo value está na área de valores normais:

:

Exemplo

O valor do atributo value está na área de valores altos:

:

---

Nos exemplos abaixo, o valor do atributo optimum está na área de valores normais (ou seja, temperaturas normais).

Exemplo

O valor do atributo value está na área de valores baixos:

:

Exemplo

O valor do atributo value está na área de valores normais:

:

Exemplo

O valor do atributo value está na área de valores altos:

:

Navegadores antigos

Navegadores antigos não conseguirão exibir a tag meter de forma esteticamente agradável e exibirão, em vez disso, o conteúdo interno da tag:

:

Atributos

O valor dos atributos pode ser um número fracionário e negativo.

Atributo	Descrição
value	Define o valor atual. Atributo obrigatório.
min	Define o valor mínimo possível. Valor padrão: 0.
max	Define o valor máximo possível. Valor padrão: 1.
low	Define o limite da área de valores baixos. Os valores baixos serão do número no atributo min até o número no atributo low.
high	Define o limite da área de valores altos. Os valores altos serão do número no atributo high até o número no atributo max.
optimum	Define a área de valores ideais.

Veja também