Справочник API

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

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

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

Имя	Тип	По умолчанию	Описание
`variant`	`HubBadgeVariant`	`'solid'`	Визуальное оформление оболочки бейджа.
`color`	`HubBadgeColor`	`'primary'`	Семантическое семейство цветов. Встроенные значения соответствуют семействам токенов дизайн-системы; поддерживаются и пользовательские имена.
`size`	`HubBadgeSize`	`'md'`	Шкала размеров бейджа.
`shape`	`HubBadgeShape`	`'pill'`	Оформление углов оболочки бейджа.
`dot`	`boolean`	`false`	Отображает точку статуса перед подписью.
`removable`	`boolean`	`false`	Включает действие закрытия, превращая бейдж в удаляемый фильтр/тег.
`removeLabel`	`string`	`'Remove badge'`	Доступная подпись для кнопки закрытия.
`tooltip`	`string`	`''`	Явный текст подсказки. Если не задан, бейдж показывает своё содержимое как подсказку только при усечении.
`interactive`	`boolean`	`false`	Превращает бейдж в интерактивный переключатель: предоставляет role="button", точку остановки при табуляции с клавиатуры и испускает output selected при активации.
`active`	`boolean`	`false`	Отражает нажатое/выбранное состояние интерактивного бейджа, переключая .hub-badge--active и атрибут aria-pressed.
`dotOverlay`	`boolean`	`false`	Отрисовывает точку состояния как угловое наложение, прикреплённое к оболочке бейджа, вместо встроенной ведущей точки.
`dotPlacement`	`HubBadgeOverlayPlacement`	`'top-end'`	Угол, к которому прикрепляется точка-наложение, когда включён dotOverlay (например, top-end, top-start, bottom-end, bottom-start).
`hub-chip · selected`	`model<boolean>`	`false`	hub-chip: двусторонне связанное selected (нажатое) состояние чипа.
`hub-chip · value`	`unknown`	`undefined`	hub-chip: непрозрачное value, идентифицирующее чип внутри охватывающего его hub-chip-set.
`hub-chip · color`	`HubBadgeColor`	`'primary'`	hub-chip: семантический акцент, задающий цвета чипа, общий с hub-badge.
`hub-chip · disabled`	`boolean`	`false`	hub-chip: отключает чип — без переключения, без удаления, исключается из порядка табуляции.
`hub-chip · removable`	`boolean`	`false`	hub-chip: включает возможность удаления, повторяя паттерн удаления бейджа.
`hub-chip · removeLabel`	`string`	`'Remove chip'`	hub-chip: доступная метка кнопки удаления.
`hub-chip-set · selectionMode`	`'single' \| 'multiple'`	`'single'`	hub-chip-set: можно ли выбрать один (single) или несколько (multiple) чипов одновременно.
`hub-chip-set · value`	`model<unknown>`	`undefined`	hub-chip-set: двусторонне связанное значение выбора — value выбранного чипа в режиме single или массив выбранных значений в режиме multiple.

События

Реагируйте на то, что делает badges, — 6 событий, к которым можно подключить вашу логику.

Имя	Тип	Описание
`removed`	`EventEmitter<void>`	Срабатывает при активации действия закрытия у удаляемого бейджа.
`selected`	`EventEmitter<void>`	Испускается при активации интерактивного бейджа щелчком, клавишей Enter или Space.
`hub-chip · selectedChange`	`EventEmitter<boolean>`	hub-chip: испускается при каждом изменении двусторонне связанного состояния selected.
`hub-chip · removed`	`EventEmitter<void>`	hub-chip: испускается при активации кнопки удаления.
`hub-chip · chipClick`	`EventEmitter<void>`	hub-chip: испускается при каждой активации (click / Enter / Space), до применения переключения.
`hub-chip-set · valueChange`	`EventEmitter<unknown>`	hub-chip-set: испускается при каждом изменении двусторонне связанного значения выбора.

Шаблоны

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

Имя	Описание	Пример
`[hubChipLeading]`	Проецирует ведущую иконку или аватар в чип, отрисовываемые перед содержимым чипа.	`<hub-chip [value]="'open'" color="success"> <i hubChipLeading class="fa-solid fa-circle" aria-hidden="true"></i> Open </hub-chip>`