Meter

Meter показывает ограниченное количественное значение, как правило без семантики прогресса во времени, свойственной индикатору выполнения.

Storybook Исходники Figma

Обзор

Стилизация Meter распределена между корневой поверхностью измерения и видимым заполнением дорожки, а смена цвета по порогам применяется на уровне корня.

Публичные CSS-переменные

Cloud storage36 of 50 GB

Переменная	Значение	Влияет на
Толщина полосы.`Meter`, `MeterTrack`		В этом состоянии изменений не видно
Текущее значение.`MeterTrack`		В этом состоянии изменений не видно
Максимум диапазона.`MeterTrack`		В этом состоянии изменений не видно
Текущий цвет заполнения.`MeterTrack`		В этом состоянии изменений не видно
Коэффициент радиуса полосы.`Meter`		В этом состоянии изменений не видно
Толщина заполнения, по умолчанию равна высоте полосы.`MeterTrack`		В этом состоянии изменений не видно
Коэффициент радиуса заполнения.`MeterTrack`		В этом состоянии изменений не видно
Цвет заполнения, когда значение в худшем диапазоне.`Meter`		В этом состоянии изменений не видно

Измените значение, чтобы примерить его в демо. Наведите на переменную, чтобы обвести то, что она меняет; переключите состояние превью, чтобы увидеть переменные наведения, нажатия, фокуса, отключённого состояния и ошибки. Клик по имени копирует его.

Переменные частей

Meter: размер корня, фоновая поверхность и сопоставление состояний порогов.
MeterTrack: ширина заполнения и видимый цвет измерения.

Взаимодействие состояний и вариантов

size меняет высоту полосы.
variant задаёт базовую цветовую группу.
Вычисленный по порогам data-state может переопределить цвет дорожки на хороший, предупреждающий или плохой.

Примеры

.compactMeter {
  --meter-height: 4px;
}

.customMeterStates {
  --meter-track-optimum-color: var(--color-green-500);
  --meter-track-suboptimum-color: var(--color-amber-500);
}

Не переопределяйте

Не путайте стилизацию meter с семантикой прогресса во времени.
Не полагайтесь только на цвет для объяснения смысла порогов.
Не снижайте контраст настолько, что дорожку становится трудно различить.