Главная » Все про HTML » Тег «meter» – вывод значений в заданном диапазоне

Тег «meter» – вывод значений в заданном диапазоне

2017-03-29 / Вр:22:01 / просмотров: 4725

В этой статье хочу рассказать о теге «meter», который отвечает за вывод значений в заданном диапазоне.
Применяется тег «meter» для отображения:

- дискового пространства;
- количества результатов запросов;
- количество голосов в голосовании (рейтинг);
- объема жидкости и т.д

Внимание: не перепутайте – тег «meter» не применяется в качестве индикатора, для этого есть тег «progress».

Атрибуты тега «meter»:

value - устанавливает значение. Обязательный атрибут
min - задает минимально возможное значение
max - задает максимально возможное значение
low - определяет предел, при достижении которого значение считается низким
high - определяет предел, при достижении которого значение считается высоким
optimum - определяет наилучшее или оптимальное значение

Внешний вид: представляет собой частично или полностью закрашенную полоску:

Также полоска может быть зеленого, желтого или красного цвета:

Цвет зависит от расположения значения optimum:

красный - min ≤ optimum < low
желтый - low ≤ optimum ≤ high
зеленый - high < optimum ≤ max

Простой пример:

<meter value="90" min="0" max="100" ></meter>

Результат:

Попробуйте изменить в атрибуте «value» значение.

Можно использовать и нецелые числа:

<meter value="0.15" min="0" max="1" ></meter>

Пример с цветной полоской:

→ Значение value="0"

<meter value="0" low="20" high="80" min="5" max="100" optimum="10" title="0ГБ из 100ГБ занято"></meter> 0ГБ из 100ГБ занято

Результат:

0ГБ из 100ГБ занято

→ Значение value="50"

<meter value="50" low="20" high="80" min="5" max="100" optimum="10" title="50ГБ из 100ГБ занято"></meter> 50ГБ из 100ГБ занято

Результат:

50ГБ из 100ГБ занято

→ Значение value="90"

<meter value="90" low="20" high="80" min="5" max="100" optimum="10" title="90ГБ из 100ГБ занято"></meter> 90ГБ из 100ГБ занято

Результат:

90ГБ из 100ГБ занято

Также можно изменить вид полоски через CSS:

meter {
margin-top: 10px;
width: 50%;
height: 25px;
background: #e5e5e5;
background: -webkit-gradient(linear, left top, right bottom, from(#e5e5e5), to(#e5e5e5), color-stop(0.33, #e5e5e5), color-stop(0.33, #cecece), color-stop(0.66, #cecece), color-stop(0.66, #e5e5e5));
background: linear-gradient(135deg, #e5e5e5, #e5e5e5 33%, #cecece 33%, #cecece 66%, #e5e5e5 66%);
background-size: 50px 25px;
}
meter::-webkit-meter-bar {
background-color: #e5e5e5;
background: -webkit-gradient(linear, left top, right bottom, from(#e5e5e5), to(#e5e5e5), color-stop(0.33, #e5e5e5), color-stop(0.33, #cecece), color-stop(0.66, #cecece), color-stop(0.66, #e5e5e5));
background: -webkit-linear-gradient(135deg, #e5e5e5, #e5e5e5 33%, #cecece 33%, #cecece 66%, #e5e5e5 66%);
background: linear-gradient(135deg, #e5e5e5, #e5e5e5 33%, #cecece 33%, #cecece 66%, #e5e5e5 66%);
background-size: 50px 25px;
}
meter::-webkit-meter-optimum-value {
background: -webkit-gradient(linear, left top, left bottom, from(#bdf), to(#bdf), color-stop(0.20, #def), color-stop(0.45, #7ac), color-stop(0.55, #7ac));
background: -webkit-linear-gradient(top, #bdf, #bdf, #def 20%, #7ac 45%, #7ac 55%);
}
meter.my_meter:-moz-meter-optimum::-moz-meter-bar {
background: linear-gradient(to bottom, #bdf, #bdf, #def 20%, #7ac 45%, #7ac 55%);
}

Результат:

Тег «meter» - вывод значений в заданном диапазоне