Angular 头像组件 | ng-hub-ui-avatar
Angular 头像组件，支持首字母、备用图片、在线状态徽标和 CSS 变量，用于可复用的用户身份界面。
样式
混入与样式
Override any of the `--hub-avatar-*` 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's defaults.
Theming with hub-avatar-theme
AL
GH
| 混入 | 参数 | 描述 |
|---|---|---|
| Theming | ||
hub-avatar-theme() | $size--hub-avatar-size$border-radius--hub-avatar-border-radius$border-width--hub-avatar-border-width$border-color--hub-avatar-border-color$bg--hub-avatar-bg-color$fg--hub-avatar-fg-color$object-fit--hub-avatar-object-fit$font-family--hub-avatar-font-family$font-weight--hub-avatar-font-weight$font-size--hub-avatar-font-size$text-transform--hub-avatar-text-transform$content-padding--hub-avatar-content-padding$content-icon-size--hub-avatar-content-icon-size$badge-size--hub-avatar-badge-size$badge-offset--hub-avatar-badge-offset$badge-ring-width--hub-avatar-badge-ring-width$badge-ring-color--hub-avatar-badge-ring-color$badge-color--hub-avatar-badge-color$badge-text-color--hub-avatar-badge-text-color$badge-font-size--hub-avatar-badge-font-size$badge-padding--hub-avatar-badge-padding$group-overlap--hub-avatar-group-overlap$group-ring-width--hub-avatar-group-ring-width$group-ring-color--hub-avatar-group-ring-color | One-call token theming for `hub-avatar-theme`. |
CSS 变量
用 29 个 CSS 变量为每一个像素设置主题。在 :root 处覆盖它们，或将其限定到某个容器范围内。
Avatar
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-avatar-overflow | hidden | string | Overflow clipping behavior for avatar container |
--hub-avatar-border-radius-round | 50% | length | Round shape radius token |
--hub-avatar-border-radius-square | var(--hub-ref-radius-sm, 0.25rem) | length | Default square shape radius token |
--hub-avatar-border-radius | var(--hub-avatar-border-radius-round, var(--hub-avatar-border-radius-square, 0.25rem)) | length | avatar 容器的边框半径 |
--hub-avatar-border-width-default | var(--hub-ref-border-width, 1px) | length | Default border width when border is enabled |
--hub-avatar-border-width | 0 | length | avatar 周围的边框宽度 |
--hub-avatar-border-color | transparent | color | avatar 周围的边框颜色 |
--hub-avatar-fg-color | var(--hub-avatar-accent-on, var(--hub-ref-color-white, #fff)) | color | 文本 avatar 中首字母的文本颜色 |
--hub-avatar-bg-color | var(--hub-avatar-accent, var(--hub-sys-color-primary, #0d6efd)) | color | 文本 avatar 的背景颜色 |
--hub-avatar-font-family | var( --hub-ref-font-family-base, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif ) | string | avatar 首字母的字体族 |
--hub-avatar-font-weight | var(--hub-ref-font-weight-base, 400) | number | avatar 首字母的字重 |
--hub-avatar-font-size | calc(var(--hub-avatar-size, 50px) / 3) | length | Avatar text font size |
--hub-avatar-line-height | var(--hub-avatar-size, 50px) | number | Avatar text line-height token |
--hub-avatar-text-transform | uppercase | string | 首字母的文本转换 |
--hub-avatar-text-align | center | string | Avatar text alignment |
--hub-avatar-object-fit | cover | string | Avatar image object-fit token |
--hub-avatar-content-padding | calc(var(--hub-avatar-size, 50px) * 0.2) | length | 投影内容与头像边缘之间的内边距。 |
--hub-avatar-content-icon-size | calc(var(--hub-avatar-size, 50px) * 0.55) | length | 投影的字体图标 / 表情符号的字号（由字形继承）。 |
--hub-avatar-badge-size | calc(var(--hub-avatar-size, 50px) * 0.28) | length | Badge dot diameter / label min-height (scales with size) |
--hub-avatar-badge-offset | 0px | length | Badge inset from the bottom-end corner |
--hub-avatar-badge-ring-width | max(2px, calc(var(--hub-avatar-size, 50px) * 0.05)) | length | Ring around the badge (separates it from the avatar) |
--hub-avatar-badge-ring-color | var(--hub-sys-surface-page, #fff) | color | Badge ring colour |
--hub-avatar-badge-color | var(--hub-sys-color-secondary, #6c757d) | color | Badge fill (neutral default; pick a semantic colour with the badgeColor input → --hub-sys-color-*) |
--hub-avatar-badge-text-color | var(--hub-ref-color-white, #fff) | color | Badge label text colour |
--hub-avatar-badge-font-size | calc(var(--hub-avatar-size, 50px) * 0.22) | length | Badge label font size |
--hub-avatar-badge-padding | calc(var(--hub-avatar-size, 50px) * 0.08) | length | Badge label inline padding |
--hub-avatar-group-overlap | calc(var(--hub-avatar-size, 50px) * 0.3) | string | Overlap amount between stacked avatars in .hub-avatar-group |
--hub-avatar-group-ring-width | max(2px, calc(var(--hub-avatar-size, 50px) * 0.04)) | length | Ring width on each avatar inside a group |
--hub-avatar-group-ring-color | var(--hub-sys-surface-page, #fff) | color | Ring colour on each avatar inside a group |