使用
Avatar组件用于展示单个用户头像
Variant:Online:
Size:
Show online indicator
变体
Avatar的variant属性支持: "square" 和"circle" 两种变体
尺寸
Avatar的size属性支持: "xs","sm","md","lg", 默认为"md"
是否在线指示器
Avatar的online属性显示是否在线指示器, 默认为undefined, 即不显示指示器.
字符占位
Avatar可以不显示头像, 只显示字符作为图像占位.
使用placeholder属性替代src属性即可.
tips: 建议只使用单个字符作为占位.
A
A
A
A
占位字符也支持online指示器:
A
A
遮罩
Avatar预定义了9种遮罩效果: "squircle"(方圆形), "heart"(心形), "star"(星形), "triangle"(三角形), "diamond"(钻石四边形), "pentagon"(五边形), "hexagon"(六边形), "hexagon2"(六边形2), "decagon"(十边形)
可以通过mask属性设置:
头像组
AvatarGroup组件用于展示一组用户头像, 最多显示 4 个头像, 超出后会显示剩余的数量.
+16
+16
+16
+16
+16
@rtdui/Avatar
| 属性名 | 类型 | 是否必须 | 默认值 | 说明 |
|---|---|---|---|---|
| mask | "squircle" | "heart" | "star" | "triangle" | "diamond" | "pentagon" | "hexagon" | "hexagon2" | "decagon" | undefined | no | ||
| online | boolean | undefined | no | ||
| placeholder | string | undefined | no | 只显示一些字符, src属性的优先级比placeholder属性高. 不建议超过两个字符 | |
| size | ThemeBaseSize | undefined | no | ||
| slots | { wrapper?: string | undefined; } | undefined | no | ||
| src | string | undefined | no | 头像的url | |
| variant | "circle" | "square" | undefined | no | circle | 方形或圆形变体 |