API 参考

这里是 badges 的完整契约：你可以绑定、监听、投影和设置主题的一切，都集中在一处。接入你需要的部分，自定义你想要的样式——它是 standalone 的，且对 signal 友好。

输入

通过 20 个输入项精细调校 badges。像绑定任意 Angular @Input 一样绑定它们。

名称	类型	默认值	描述
`variant`	`HubBadgeVariant`	`'solid'`	徽章外壳的视觉样式。
`color`	`HubBadgeColor`	`'primary'`	语义颜色族。内置值映射到 design system 的 token 族，同时支持自定义名称。
`size`	`HubBadgeSize`	`'md'`	徽章的尺寸级别。
`shape`	`HubBadgeShape`	`'pill'`	徽章外壳的圆角处理。
`dot`	`boolean`	`false`	在标签前渲染一个状态圆点。
`removable`	`boolean`	`false`	启用移除操作，使徽章成为可移除的筛选器/标签。
`removeLabel`	`string`	`'Remove badge'`	应用于移除按钮的无障碍标签。
`tooltip`	`string`	`''`	显式提示文本。省略时，仅当内容被截断时，徽章才会将自身内容显示为提示。
`interactive`	`boolean`	`false`	将 badge 变为可交互的切换项：暴露 role="button"、一个键盘 tab 停靠点，并在激活时发出 selected 输出。
`active`	`boolean`	`false`	反映可交互 badge 的按下/选中状态，切换 .hub-badge--active 类与 aria-pressed 属性。
`dotOverlay`	`boolean`	`false`	将状态点渲染为固定在 badge 外壳角落的叠加标记，而不是内联的前导圆点。
`dotPlacement`	`HubBadgeOverlayPlacement`	`'top-end'`	启用 dotOverlay 时，叠加圆点固定所在的角落（例如 top-end、top-start、bottom-end、bottom-start）。
`hub-chip · selected`	`model<boolean>`	`false`	hub-chip：chip 的双向 selected（按下）状态。
`hub-chip · value`	`unknown`	`undefined`	hub-chip：在其所属 hub-chip-set 内标识该 chip 的不透明 value。
`hub-chip · color`	`HubBadgeColor`	`'primary'`	hub-chip：驱动 chip 颜色的语义强调色，与 hub-badge 共享。
`hub-chip · disabled`	`boolean`	`false`	hub-chip：禁用该 chip——不可切换、不可移除，并从 tab 顺序中移除。
`hub-chip · removable`	`boolean`	`false`	hub-chip：启用关闭功能，与 badge 的关闭模式保持一致。
`hub-chip · removeLabel`	`string`	`'Remove chip'`	hub-chip：关闭按钮的无障碍标签。
`hub-chip-set · selectionMode`	`'single' \| 'multiple'`	`'single'`	hub-chip-set：一次可选中一个（single）还是多个（multiple）chip。
`hub-chip-set · value`	`model<unknown>`	`undefined`	hub-chip-set：双向选中值——single 模式下为选中的 chip value，或 multiple 模式下为选中值的数组。

输出

响应 badges 的行为——有 6 个事件可供你挂接逻辑。

名称	类型	描述
`removed`	`EventEmitter<void>`	当可移除徽章的移除操作被触发时发出。
`selected`	`EventEmitter<void>`	当可交互 badge 通过点击、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]`	向 chip 中投影一个前导图标或头像，渲染在 chip 内容之前。	`<hub-chip [value]="'open'" color="success"> <i hubChipLeading class="fa-solid fa-circle" aria-hidden="true"></i> Open </hub-chip>`