Meter

Meter сравнивает конечное value с границами min и max. Он показывает уже известное состояние показателя; выполняющуюся операцию обозначает Progress, а выбор значения — Slider.

Статус: experimental · в системе с 2026-07 · интерактивность: none (нет)

Когда использовать

Нужно показать заполненность квоты, ёмкости или лимита.
Текущее число имеет устойчивые нижнюю и верхнюю границы.
Смысл показателя важно отличить как обычный, успешный, предупреждающий или критический.

Не использовать:

Операция ещё выполняется — используй Progress.
Пользователь должен менять значение — используй Slider.
Верхняя граница неизвестна или меняется в момент показа.

Альтернативы:

progress — ход выполняющейся операции
slider — интерактивный выбор числа на шкале

Заполнение

Обычный показатель показывает вычисленный процент диапазона.

Использовано хранилища

<!--
  🟢

  Базовый Meter показывает заполненность известной квоты. Процент вычисляется
  из value, min и max без дополнительной продуктовой логики.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Meter from "$lib/ui/Meter.svelte";
</script>

<Meter label={t("Использовано хранилища")} value={64} />

Смысловые тона

ProductScope передаёт готовую оценку показателя через tone.

Обычная загрузка

Цель выполнена

Лимит близко

Лимит исчерпан

<!--
  🟢

  Пример тонов показывает четыре готовые семантические оценки. Порог выбора
  tone остаётся решением продукта и не вычисляется внутри Meter.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Meter from "$lib/ui/Meter.svelte";
</script>

<Meter label={t("Обычная загрузка")} value={45} />
<Meter label={t("Цель выполнена")} value={82} tone="success" />
<Meter label={t("Лимит близко")} value={76} tone="warning" />
<Meter label={t("Лимит исчерпан")} value={96} tone="danger" />

Границы и подпись

Ненулевой min и valueText уточняют прикладное значение шкалы.

Использовано мест

<!--
  🟢

  Meter с ненулевой нижней границей показывает прикладной интервал. ValueText
  заменяет вычисленный процент понятной пользователю подписью.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Meter from "$lib/ui/Meter.svelte";
</script>

<Meter
	label={t("Использовано мест")}
	min={20}
	max={80}
	value={50}
	valueText={t("50 из 80 мест")}
/>