Призрачные метры

Опубликовано: 16 Февраля, 2023

Spectre Meters представляют значение в пределах известного диапазона. Измеритель — важный компонент разработки, используя класс измерителя в Spectre, мы можем создать поле измерителя. Мы можем указать состояние счетчика его цветом, который можно определить с помощью атрибутов.

Класс спектрометров:

метр: этот класс используется для создания поля счетчика.

Атрибуты Spectre Meters:

value: Этот атрибут содержит значение счетчика.
оптимум: этот атрибут содержит возможный результат.
min: этот атрибут содержит минимальное значение поля счетчика.
max: этот атрибут содержит максимальное значение поля счетчика.
low: этот атрибут содержит нижнее значение, указывающее на состояние счетчика.
высокий: этот атрибут имеет высокое значение, которое указывает на состояние счетчика.

Синтаксис:

<meter class="meter" 
       value="20" 
       optimum="85" 
       min="0" 
       max="100" 
       low="25" 
       high="75">
</meter>

Пример 1: В этом примере описывается основное использование Spectre Meters . Здесь мы создадим 4 метра, два из которых будут зеленого цвета, один желтый и еще один красный.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre.min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
    <style>
        body{
            margin: 5px;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 class="text-success">GeeksforGeeks</h1>
        <strong>Spectre Meters</strong>
    </center>
    <br><br>
    <strong>Normal Meter:</strong>
    <meter class="meter" 
           value="55"
           min="0"
           max="100">
    </meter>
    <strong>Green Meter:</strong>
    <meter class="meter" 
           value="48" 
           min="0" 
           max="100" 
           low="25" 
           high="75">
    </meter>
    <strong>Yellow Meter:</strong>
    <meter class="meter" 
           value="35" 
           optimum="85" 
           min="0" 
           max="100" 
           low="25" 
           high="75">
    </meter>
    <strong>Red Meter:</strong>
    <meter class="meter" 
           value="18" 
           optimum="85" 
           min="0" 
           max="100" 
           low="25" 
           high="75">
    </meter>
</body>
  
</html>

Выход:

Пример 2: В этом примере мы создадим 3 счетчика, которые будут обозначать 3 цвета на основе установленных значений атрибутов.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre.min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
    <style>
        body{
            margin: 5px;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 class="text-success">GeeksforGeeks</h1>
        <strong>Spectre Meters</strong>
    </center>
    <br><br>
    <strong>Red Meter:</strong>
    <meter class="meter" 
           value="18" 
           optimum="85" 
           min="0" 
           max="100" 
           low="25" 
           high="75">
    </meter>
    <strong>Yellow Meter:</strong>
    <meter class="meter" 
           value="48" 
           optimum="85" 
           min="0" 
           max="100" 
           low="25" 
           high="75">
    </meter>
    <strong>Normal Meter:</strong>
    <meter class="meter" 
           value="58" 
           min="0" 
           max="100">
    </meter>
</body>
  
</html>

Выход:

Поддерживаемые браузеры:

Firefox 106 и выше
Chrome 107 и выше
Microsoft Edge 107
Сафари 16.1
Опера 16

Ссылка: https://picturepan2.github.io/spectre/experimentals/meters.html

CSS

Призрачные метры

HTML

HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ