API 参考

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

输入

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

名称	类型	默认值	描述
`size`	`string \| number`	`50`	头像尺寸（像素）
`name`	`string`	—	当图片来源失败时用于生成首字母缩写的用户名
`src`	`string \| SafeUrl`	—	头像的主要自定义图片来源 URL
`alt`	`string`	—	头像图片的替代文本，用于无障碍访问
`round`	`boolean`	`true`	头像是否为圆形（true），或遵循 cornerRadius
`interactive`	`boolean`	`false`	将头像标记为可交互控件：暴露 role=“button”，使其可聚焦，并可通过 Enter/Space 触发 clickOnAvatar。绑定 (clickOnAvatar) 时应始终启用。
`bgColor`	`string`	—	文字头像的背景颜色。若未提供则自动生成
`autoColor`	`boolean`	`true`	为 `true`（默认）时，首字母头像的背景由名称的哈希值生成。设为 `false` 可改为通过 `--hub-avatar-bg-color` 变量进行主题化；显式的 `bgColor` 始终优先。
`fgColor`	`string`	`#FFF`	文本 avatar 中首字母的文本颜色
`borderColor`	`string`	—	头像周围的边框颜色
`cornerRadius`	`string \| number`	`0`	当 round 为 false 时的圆角半径
`textSizeRatio`	`number`	`3`	根据头像尺寸计算文字大小的比例（size / textSizeRatio）
`initialsSize`	`string \| number`	`0`	限制显示的首字母数量（0 = 不限制）
`facebookId`	`string`	—	用于获取头像的 Facebook 用户 ID（尽力而为，可能受 API 限制）
`githubId`	`string`	—	用于获取头像的 GitHub 用户名
`gravatarId`	`string`	—	用于获取头像的 Gravatar 邮箱或 MD5 哈希值
`value`	`string`	—	将自定义值显示为头像（例如 "75%"、"+5"）
`style`	`Partial<CSSStyleDeclaration>`	—	应用于头像根元素的自定义样式
`referrerpolicy`	`string`	—	头像图片的 referrer 策略（例如 "no-referrer"）
`badge`	`string \| number \| boolean \| null`	—	角标叠加：`badge` / `[badge]="true"` → 圆点；`badge="4k"` → 文字徽标；null / 缺省 → 无。
`badgeColor`	`HubAvatarBadgeColor \| string \| null`	—	徽标的语义颜色（primary · secondary · success · danger · warning · info · light · dark）→ `--hub-sys-color-*`。

输出

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

名称	类型	描述
`clickOnAvatar`	`Source`	当头像被点击时触发，返回当前活动的来源对象

模板

尚未记录任何模板。