Справочник API

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

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

Настройте metrics с помощью 19 входных свойств. Привязывайте их, как любой @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`	`'primary'`	Семантический акцент, задающий цвет индикатора, сопоставленный с семейством токенов --hub-sys-color-*.
`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-ring · value`	`number`	`0`	Значение оценки, выраженное как отношение 0..1 или как величина 0..max.
`hub-ring · max`	`number`	`1`	Верхняя граница, относительно которой нормализуется значение.
`hub-ring · size`	`number \| string`	`'4rem'`	Внешний диаметр кольца (число трактуется как px, либо любая строка CSS-длины).
`hub-ring · thickness`	`number \| string`	`'0.5rem'`	Ширина обводки кольца (число трактуется как px, либо любая строка CSS-длины).
`hub-ring · thresholds`	`HubRingThresholds \| undefined`	`undefined`	Необязательные цветовые пороги, перекрашивающие индикатор по диапазону (low/high).
`hub-ring · showValue`	`boolean`	`true`	Отображается ли округлённый процент в центре.

События

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

Шаблоны

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

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