Angular Badges Library | ng-hub-ui-badges
Semantic Angular badges for statuses, counters and removable filter tags, with CSS variables and public SCSS mixins for custom colour families.
API 参考
这里是 badges 的完整契约：你可以绑定、监听、投影和设置主题的一切，都集中在一处。接入你需要的部分，自定义你想要的样式——它是 standalone 的，且对 signal 友好。
输入
通过 7 个输入项精细调校 badges。像绑定任意 Angular @Input 一样绑定它们。
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
variant | HubBadgeVariant | 'solid' | Visual treatment of the badge shell. |
color | HubBadgeColor | 'primary' | Semantic colour family. Built-ins map to the design-system token families and custom names are supported. |
size | HubBadgeSize | 'md' | Badge size scale. |
shape | HubBadgeShape | 'pill' | Corner treatment of the badge shell. |
dot | boolean | false | Renders a leading status dot before the label. |
removable | boolean | false | Enables the dismiss affordance, turning the badge into a removable filter/tag. |
removeLabel | string | 'Remove badge' | Accessible label applied to the dismiss button. |
输出
响应 badges 的行为——有 1 个事件可供你挂接逻辑。
| 名称 | 类型 | 描述 |
|---|---|---|
removed | EventEmitter<void> | Emitted when the dismiss action of a removable badge is activated. |
模板
尚未记录任何模板。
CSS 变量
用 14 个 CSS 变量为每一个像素设置主题。在 :root 处覆盖它们，或将其限定到某个容器范围内。
Layout & Spacing
Typography, padding, radius and internal gap tokens for the badge shell.
| 变量 | 默认值 | 类型 | 描述 |
|---|---|---|---|
--hub-badge-font-size | 0.875rem | length | Base font size of the badge shell. 0.75rem1rem |
--hub-badge-padding-x | 0.625rem | length | Horizontal padding inside the badge shell. 0.5rem0.875rem |
--hub-badge-padding-y | 0.375rem | length | Vertical padding inside the badge shell. 0.25rem0.5rem |
--hub-badge-border-radius | 50rem | length | Corner radius of the badge shell. 0.25rem9999px |
--hub-badge-gap | 0.375rem | length | Gap between dot, icons, label and remove button. 0.25rem0.5rem |
--hub-badge-direction | row | string | Flex direction of the badge content (projected icon, label and dismiss button). rowrow-reverse |
--hub-badge-align | center | string | Cross-axis alignment of the badge content. centerbaseline |
Semantic Colour Roles
Accent, subtle, emphasis and border roles derived from the selected semantic family.
| 变量 | 默认值 | 类型 | 描述 |
|---|---|---|---|
--hub-badge-accent | var(--hub-sys-color-primary) | color | Root semantic accent from which the badge derives its look. var(--hub-sys-color-success)#7c3aed |
--hub-badge-accent-subtle | var(--hub-sys-color-primary-subtle) | color | Tinted surface used by soft and subtle variants. #e7f1ff#ede9fe |
--hub-badge-accent-emphasis | var(--hub-sys-color-primary-emphasis) | color | Emphasis foreground used by outline, ghost and soft variants. #0a58ca#5b21b6 |
--hub-badge-accent-border | var(--hub-sys-color-primary-border-subtle) | color | Border role used by subtle and surface variants. #9ec5fe#c4b5fd |
Dot & Dismiss Controls
Tokens driving the status-dot size and the removable action affordance.
| 变量 | 默认值 | 类型 | 描述 |
|---|---|---|---|
--hub-badge-dot-size | 0.5rem | length | Diameter of the optional status dot. 0.375rem0.625rem |
--hub-badge-remove-size | 1rem | length | Size of the dismiss hit area. 0.875rem1.25rem |
--hub-badge-remove-hover-bg | color-mix(in srgb, currentColor 12%, transparent) | color | Hover surface of the dismiss affordance. rgba(0,0,0,.08)transparent |
样式与主题
尚未记录任何样式示例。本节将包含自定义方案和主题示例。