Справочник API

Вот полный контракт metrics: всё, что можно привязать, прослушать, спроецировать и тематизировать, собрано в одном месте. Подключите то, что нужно, и оформите так, как хотите — это standalone и дружит с сигналами.

Входные свойства

Настройте metrics с помощью 21 входных свойств. Привязывайте их, как любой @Input в Angular.

Имя	Тип	По умолчанию	Описание
`hub-progress · value`	`number`	`0`	Текущее значение прогресса, выраженное по шкале [0, max].
`hub-progress · max`	`number`	`100`	Верхняя граница шкалы прогресса.
`hub-progress · indeterminate`	`boolean`	`false`	Отображает зацикленную полосу для работы неизвестной продолжительности; убирает aria-valuenow.
`hub-progress · color`	`HubMetricsColor \| undefined`	`undefined`	Необязательный акцент, задающий цвет индикатора: одиночное слово (семантическое имя, зарегистрированный акцент или именованный цвет CSS) сопоставляется с --hub-sys-color-<name>, а само слово служит запасным значением; литерал (#hex, rgb(), oklch(), var()…) передаётся без изменений. Применяется инлайн, когда задан; опустите его, чтобы акцентом управлял токен --hub-progress-accent.
`hub-progress · size`	`HubProgressSize`	`'md'`	Токен размера, управляющий толщиной полосы (sm, md или lg).
`hub-progress · showValue`	`boolean`	`false`	Отображается ли округлённый процент рядом с полосой.
`hub-progress · label`	`string`	`''`	Доступная метка, описывающая, что измеряет индикатор прогресса.
`hub-meter · value`	`number`	`0`	Текущее измерение, выраженное по шкале [min, max].
`hub-meter · min`	`number`	`0`	Нижняя граница шкалы.
`hub-meter · max`	`number`	`1`	Верхняя граница шкалы.
`hub-meter · low`	`number \| undefined`	`undefined`	Верхний предел «низкой» области; по умолчанию равен min, если не указан.
`hub-meter · high`	`number \| undefined`	`undefined`	Нижний предел «высокой» области; по умолчанию равен max, если не указан.
`hub-meter · optimum`	`number \| undefined`	`undefined`	Предпочтительная точка диапазона; по умолчанию равна середине, если не указана.
`hub-meter · label`	`string`	`''`	Доступная метка, называющая, что измеряет датчик; role=meter получает имя только от автора, без неё датчик остаётся безымянным.
`hub-ring · value`	`number`	`0`	Значение оценки, выраженное как отношение 0..1 или как величина 0..max.
`hub-ring · max`	`number`	`1`	Верхняя граница, относительно которой нормализуется значение.
`hub-ring · size`	`number \| string \| undefined`	`undefined`	Внешний диаметр кольца (число трактуется как px, либо любая строка CSS-длины); применяется инлайн, когда задан. Опустите его, чтобы диаметром управлял токен --hub-ring-size.
`hub-ring · thickness`	`number \| string \| undefined`	`undefined`	Ширина обводки кольца (число трактуется как px, либо любая строка CSS-длины); применяется инлайн, когда задана. Опустите её, чтобы обводкой управлял токен --hub-ring-thickness.
`hub-ring · thresholds`	`HubRingThresholds \| undefined`	`undefined`	Необязательные цветовые пороги, перекрашивающие индикатор по диапазону (low/high).
`hub-ring · showValue`	`boolean`	`true`	Отображается ли округлённый процент в центре.
`hub-ring · label`	`string`	`''`	Доступная метка, называющая, что оценивает кольцо; ни проецируемая подпись, ни процент в центре не могут дать имя role=meter.

События

События пока не задокументированы.

Шаблоны

Сделайте его своим — 1 слотов шаблона позволяют проецировать собственную разметку.

Имя	Описание	Пример
`hub-ring · <ng-content>`	Содержимое, проецируемое в центр кольца как подпись, рядом со встроенным процентом (или вместо него). Это оформление, а не имя: элемент с role="meter" называет только автор, поэтому передайте вход `label`.	`<hub-ring [value]="0.82" [thresholds]="{ low: 0.4, high: 0.75 }" label="Quality score">Score</hub-ring>`