Angular 头像组件 | ng-hub-ui-avatar
Angular 头像组件，支持首字母、备用图片、在线状态徽标和 CSS 变量，用于可复用的用户身份界面。
交互式示例
探索实时示例，了解该库在常见 Angular 用例中的表现。
头像来源
可从社交资料、自定义图片、名称首字母或自定义值解析头像，并提供自动回退。
Facebook 资料
Gravatar
GitHub 资料
自定义图片来源
姓名首字母
JD
值显示
75%
回退系统
会优雅地逐一降级遍历每个已配置的来源，直到显示出一个有意义的表示。
回退系统
Showing GitHub source (Facebook ID invalid)
尺寸
可控制头像尺寸、文字与尺寸的比例以及渲染多少个首字母。
自定义尺寸
SD
文字大小比例
RD
首字母数量限制
JD
样式
形状、圆角半径、颜色、边框和任意内联样式——全部由输入和 CSS 变量驱动。
圆形头像
R
圆角半径
R
背景色和前景色
C
TD
--hub-avatar-bg-color ([autoColor]="false")边框颜色
B
自定义样式
S
交互性
通过头像点击事件对用户交互做出响应。
点击事件处理器
CM
分组与徽标
将头像堆叠为分组，并在角落叠加徽标——状态圆点或计数——使用语义色板着色。
头像组显示
A
B
C
+3
徽标（圆点与计数）
AL
GH
AT
LT
CM
JD
自定义内容
可将任意图标、内联 SVG、图片或表情符号投影到头像内。它会居中、留白并按头像形状裁剪，以不依赖类型的方式调整大小（字体图标缩放，SVG/图片填充），并通过常规的 bgColor / fgColor 输入进行主题化。
自定义内容（图标、SVG）
🚀