Библиотека бейджей для Angular | ng-hub-ui-badges
Семантические бейджи Angular для статусов, счётчиков и удаляемых тегов фильтров, с CSS-переменными и публичными SCSS-миксинами для собственных цветовых семейств.
Интерактивные примеры
Изучите живые примеры, показывающие, как библиотека ведёт себя в типичных сценариях использования Angular.
Семантическая матрица
Основная поверхность бейджа: семантические цвета в вариантах solid, soft, outline, ghost, subtle и surface.
Семантическая матрица
Масштаб и форма
Компактные теги XS, более просторные пилюли LG и три формы оболочки — для плотных таблиц или просторных дашбордов.
Масштаб и форма
Статусы и счётчики
Точки статуса, счётчики уведомлений, бейджи с иконками и лёгкие пилюли метаданных из одного примитива.
Статусы и счётчики
Удаляемые фильтры
Закрываемые теги для активных фильтров, пилюли поиска с областью действия и лёгкие интерфейсы токенов.
Удаляемые фильтры
Открытая семантическая тематизация
Встроенные цвета читают общие токены дизайн-системы, а пользовательские акценты подключаются через публичные SCSS-миксины.
Открытая семантическая тематизация
Усечение и подсказка
Длинные подписи усекаются многоточием и показываются при наведении — через нативный title или подсказку hub-ui, если она подключена.
Усечение и подсказка
Чипы-фильтры
Переключаемые теги hub-chip, координируемые hub-chip-set для одиночного или множественного выбора, повторно использующие акцентное оформление бейджа.
Интерактивные чипы-фильтры
Цвета чипов
Девять встроенных акцентов на чипе, а также самостоятельный двусторонний переключатель, удаляемый тег и отключённый чип — всё вне chip-set.
Цвета чипов
selected)