Angular 徽章库 | ng-hub-ui-badges

交互式示例

探索实时示例，了解该库在常见 Angular 用例中的表现。

语义矩阵

徽章的核心表现形式：在 solid、soft、outline、ghost、subtle 和 surface 变体中呈现语义颜色。

尺寸与形状

紧凑的 XS 标签、更宽松的 LG 胶囊以及三种外壳形状，可适配密集表格或宽松的仪表盘。

状态与计数

使用同一个基础组件即可实现状态圆点、警报计数、图标徽章和轻量的元数据胶囊。

可移除筛选器

用于活动筛选器、限定范围搜索胶囊和轻量 token 界面的可移除标签。

开放式语义主题

内置颜色读取共享的 design system token，自定义强调色则通过公开的 SCSS mixin 接入。

截断与提示

较长的标签会以省略号截断，并在悬停时显示完整内容——使用原生 title，或在接入后使用 hub-ui 提示。

筛选 chip

可切换的 hub-chip 标签，由 hub-chip-set 统一协调实现单选或多选，并复用 badge 的强调色主题。

纸片颜色

chip 上的九种内置强调色，外加一个独立的双向切换、一个可移除标签和一个禁用的 chip——全部位于 chip-set 之外。