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.
样式
混入与样式
Override the key `--hub-badge-*` design tokens in a single include. Every parameter is OPTIONAL and defaults to `null`: only the parameters you pass are emitted, so the rest keep the component defaults. Token-based and self-contained.
Theming with hub-badge-theme
| 混入 | 参数 | 描述 |
|---|---|---|
| Theming | ||
hub-badge-theme() | $accent--hub-badge-accent$bg--hub-badge-bg$color--hub-badge-color$border-color--hub-badge-border-color$border-radius--hub-badge-border-radius$border-width--hub-badge-border-width$padding-x--hub-badge-padding-x$padding-y--hub-badge-padding-y$gap--hub-badge-gap$font-size--hub-badge-font-size$font-weight--hub-badge-font-weight | One-call token theming for `<hub-badge>` (and `<hub-chip>`) |
CSS 变量
用 49 个 CSS 变量为每一个像素设置主题。在 :root 处覆盖它们，或将其限定到某个容器范围内。
Badge
Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.
| 变量 | 默认值 | 类型 | 描述 |
|---|---|---|---|
--hub-badge-accent | var(--hub-sys-color-primary, #0d6efd) | color | 徽章外观所派生的根语义强调色。 |
--hub-badge-accent-border | color-mix(in oklch, var(--hub-badge-accent) 35%, var(--hub-sys-surface-page, #fff)) | color | subtle 和 surface 变体使用的边框角色。 |
--hub-badge-accent-on | oklch(from var(--hub-badge-accent) clamp(0, (0.62 - l) * 1000, 1) 0 h) | color | Badge accent contrast (on-color) |
--hub-badge-accent-emphasis | color-mix(in oklch, var(--hub-badge-accent) 80%, var(--hub-sys-color-ink, #212529)) | color | outline、ghost 和 soft 变体使用的强调前景色。 |
--hub-badge-accent-subtle | color-mix(in oklch, var(--hub-badge-accent) 12%, var(--hub-sys-surface-page, #fff)) | color | soft 和 subtle 变体使用的浅色表面。 |
--hub-badge-align | center | string | 徽章内容在交叉轴上的对齐方式。 |
--hub-badge-bg | var(--hub-badge-accent) | color | Badge bg |
--hub-badge-border-color | var(--hub-badge-accent) | color | Badge border color |
--hub-badge-border-radius | var(--hub-ref-radius-pill, 50rem) | length | 徽章的圆角半径。 |
--hub-badge-border-width | var(--hub-ref-border-width, 1px) | length | Badge border width |
--hub-badge-color | var(--hub-badge-accent-on) | color | Badge color |
--hub-badge-direction | row | string | 徽章内容（投影的图标、标签和移除按钮）的 flex 方向。 |
--hub-badge-dot-color | currentColor | color | Badge dot color |
--hub-badge-dot-size | var(--hub-ref-space-2, 0.5rem) | length | 可选状态圆点的直径。 |
--hub-badge-focus-ring-color | var(--hub-sys-focus-ring-color, rgba(13, 110, 253, 0.25)) | color | Badge focus ring color |
--hub-badge-focus-ring-width | var(--hub-sys-focus-ring-width, 0.25rem) | length | Badge focus ring width |
--hub-badge-font-family | var(--hub-ref-font-family-base, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif) | string | Badge font family |
--hub-badge-font-size | var(--hub-ref-font-size-sm, 0.875rem) | length | 徽章的基础字号。 |
--hub-badge-max-width | 100% | length | 徽章在标签被省略号截断之前的最大宽度。 |
--hub-badge-font-weight | var(--hub-ref-font-weight-semibold, 600) | number | Badge font weight |
--hub-badge-gap | var(--hub-ref-space-1, 0.25rem) | length | 圆点、图标、标签和移除按钮之间的间距。 |
--hub-badge-letter-spacing | 0.01em | length | Badge letter spacing |
--hub-badge-line-height | 1 | number | Badge line height |
--hub-badge-padding-x | var(--hub-ref-space-2, 0.5rem) | length | 徽章内的水平内边距。 |
--hub-badge-padding-y | var(--hub-ref-space-1, 0.25rem) | length | 徽章内的垂直内边距。 |
--hub-badge-remove-gap | 0.125rem | length | Badge remove gap |
--hub-badge-remove-hover-bg | color-mix(in oklch, currentColor 12%, transparent) | color | 移除按钮悬停时的背景表面。 |
--hub-badge-remove-size | 1rem | length | 移除按钮点击区域的大小。 |
--hub-badge-transition | var(--hub-sys-transition-base, all 0.2s ease-in-out) | transition | Badge transition |
--hub-badge-active-bg | var(--hub-badge-accent-emphasis) | color | Active (pressed) background of an interactive badge (.hub-badge--active) |
--hub-badge-overlay-offset | -0.25rem | length | Corner inset of the overlay status dot (dotOverlay) |
--hub-chip-set-gap | var(--hub-ref-space-2, 0.5rem) | length | Gap between chips inside a hub-chip-set |
--hub-chip-transition | var(--hub-sys-transition-base, all 0.2s ease-in-out) | transition | Chip transition |
--hub-chip-focus-ring-width | var(--hub-sys-focus-ring-width, 0.25rem) | length | Chip focus ring width |
--hub-chip-border-radius | var(--hub-ref-radius-pill, 50rem) | length | Chip shell radius |
--hub-chip-border-width | var(--hub-ref-border-width, 1px) | length | Chip border width |
--hub-chip-padding-y | var(--hub-ref-space-1, 0.25rem) | length | Chip vertical padding |
--hub-chip-padding-x | var(--hub-ref-space-2, 0.5rem) | length | Chip horizontal padding |
--hub-chip-font-weight | var(--hub-ref-font-weight-medium, 500) | number | Chip font weight |
--hub-chip-font-size | var(--hub-ref-font-size-sm, 0.875rem) | length | Chip font size |
--hub-chip-font-family | var(--hub-ref-font-family-base, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif) | string | Chip font family |
--hub-chip-focus-ring | var(--hub-sys-focus-ring-color, rgba(13, 110, 253, 0.25)) | color | Chip focus ring colour |
--hub-chip-gap | var(--hub-ref-space-1, 0.25rem) | length | Gap between leading slot, label and dismiss button |
--hub-chip-hover-bg | color-mix(in oklch, var(--hub-badge-accent) 20%, var(--hub-sys-surface-page, #fff)) | color | Hover surface for an unselected, enabled chip |
--hub-chip-selected-color | var(--hub-badge-accent-on) | color | Selected chip text colour (on-accent contrast) |
--hub-chip-selected-bg | var(--hub-badge-accent) | color | Selected chip background |
--hub-chip-border-color | var(--hub-badge-accent-border) | color | Resting chip border colour |
--hub-chip-color | var(--hub-badge-accent-emphasis) | color | Resting chip text colour |
--hub-chip-bg | var(--hub-badge-accent-subtle) | color | Resting chip background (shared badge accent family) |