API 参考

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

输入

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

名称	类型	默认值	描述
`size`	`string \| number`	`50`	头像尺寸：纯数字表示像素；任何 CSS 长度（1.75rem、50%、calc(2rem + 12px)）都按原样绘制
`name`	`string \| null`	—	当图片来源失败时用于生成首字母缩写的用户名
`src`	`string \| SafeUrl \| null`	—	头像的主要自定义图片来源 URL
`alt`	`string \| null`	—	头像图片的替代文本，用于无障碍访问
`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 \| undefined`	—	首字母与投影内容的颜色。不设置时，头像会依背景选择黑色或白色——取能达到 WCAG 标准的那个；显式指定的值始终优先，无论对比度如何。
`borderColor`	`string`	—	头像周围的边框颜色
`cornerRadius`	`string \| number`	`0`	当 round 为 false 时的圆角半径
`textSizeRatio`	`number`	`3`	根据头像尺寸计算文字大小的比例（size / textSizeRatio）
`initialsSize`	`string \| number`	`0`	限制显示的首字母数量（0 = 不限制）
`facebookId`	`string \| null`	—	用于获取头像的 Facebook 用户 ID（尽力而为，可能受 API 限制）
`githubId`	`string \| null`	—	用于获取头像的 GitHub 用户名
`gravatarId`	`string \| null`	—	用于获取头像的 Gravatar 邮箱或 MD5 哈希值
`value`	`string \| null`	—	将自定义值显示为头像（例如 "75%"、"+5"）
`style`	`Record<string, string \| number \| null \| undefined> \| string`	—	合并到渲染内容（图片、姓名首字母或投影内容槽）的内联样式。接受样式对象或 CSS 字符串；不会作用于宿主元素
`referrerpolicy`	`string \| null`	—	头像图片的 referrer 策略（例如 "no-referrer"）
`placeholder`	`string`	—	最后兜底的图片：仅在没有其他内容可画时显示——没有解析出来源、没有声明来源，或某个来源仍在加载——并且也没有姓名首字母。它永远不会进入回退链，因此不会像 `src` 那样越过首字母。
`badge`	`string \| number \| boolean \| null`	`null`	角标叠加：`badge` / `[badge]="true"` → 圆点；`badge="4k"` → 文字徽标；null / 缺省 → 无。
`badgeColor`	`HubAvatarBadgeColor \| string \| null`	`null`	徽标的语义颜色（primary · secondary · success · danger · warning · info · light · dark）→ `--hub-sys-color-*`。

输出

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

名称	类型	描述
`clickOnAvatar`	`OutputEmitterRef<Source \| null>`	点击时触发，设置 `interactive` 后按 Enter/空格也会触发；返回正在绘制头像的来源（带有 `sourceType`、`sourceId` 与 `getAvatar(size)`），若没有来源解析成功则为 null。`Source` 由该包导出，因此处理函数可以写出类型，而不必退回 any

方法

通过代码驱动 avatar——其编程接口提供 1 个方法。

名称	签名	返回值	描述
`Source.getAvatar`	`getAvatar(size: number): string`	`string`	解析该来源在指定尺寸下所绘制的内容：远程来源给出图片 URL，本地来源给出首字母或纯文本。`Source` 是 `clickOnAvatar` 的载荷，并由该包导出。

模板

尚未记录任何模板。