Пропсы корня
| Проп | Тип | По умолчанию |
|---|---|---|
size | MeterSize | 'md' |
| Визуальный размер индикатора. Обычно соответствует предопределённым токенам размера дизайн-системы. | ||
variant | MeterVariant | 'primary' |
| Визуальный вариант индикатора (например, для тем оформления). | ||
max | number | 1 |
| Максимально возможное значение индикатора. По умолчанию 1. | ||
min | number | 0 |
| Минимально возможное значение индикатора. По умолчанию 0. | ||
valueобязательный | number | — |
Текущее числовое значение индикатора. Обязательно. Ограничивается диапазоном от min до max. | ||
valueText | string | — |
| Визуально скрытая доступная метка для скринридеров, описывающая текущее значение (например, "60% fuel"). | ||
fullWidth | boolean | — |
| Растягивается ли индикатор на всю ширину контейнера. | ||
optimum | number | — |
| «Оптимальное» значение индикатора. Определяет, какая область (low, high, optimum) предпочтительна. | ||
low | number | — |
| Нижний порог неоптимальных значений. Значение ниже него может считаться «плохим». | ||
high | number | — |
| Верхний порог неоптимальных значений. Значение выше него может считаться «плохим» (если optimum низкий). | ||
Также принимает все атрибуты <div>.
Дочерние части
MeterTrack: видимая дорожка заполнения.
MeterTrack
Также принимает все атрибуты <div>.
Типы
MeterPropsMeterTrackPropsMeterSizeMeterVariant
Модель состояния
Meterвсегда определяется значением и не бывает неопределённым.- Пропсы порогов могут менять семантическое состояние с нейтрального на хорошее, предупреждающее или плохое.