Avatar
有图显示图;没图、图还在加载或加载失败时显示名字的首字。首字规则:拉丁文多词取前两个词的首字母(Ada Lovelace → AL),其余取第一个字(向文可 → 向),按字素切,表情与生僻字不会切坏。
尺寸、回落与头像组
+3
size取small(1.5rem)、medium(缺省,2rem)、large(3rem),别的尺寸用class写size-*与字号。- 底色与字色写在根上(主色底、主色上的前景字),反色背景上用
class改,如个人菜单头部的bg-(--ui-primary-fg) text-(--ui-primary)。 name同时是读屏名;头像旁边已经写了名字时加aria-hidden="true",免得念两遍。
XAvatarGroup 把头像叠成一排,每个头像套一圈页面底色的描边;超过 max 时最后一位换成「+N」,总占位仍是 max 个,不比没折叠时更宽。
API
Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
src | string | undefined | undefined | 图片地址;缺省或加载失败时显示 `name` 的首字 |
name | string | undefined | undefined | 用户名:取首字作占位,也是图片的替代文字 |
size | "small" | "medium" | "large" | undefined | "medium" | 边长,缺省 medium(2rem) |
XAvatarGroup
Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
max | number | undefined | undefined | 最多显示几个,多的折成「+N」 |
size | "small" | "medium" | "large" | undefined | "medium" | 「+N」的边长,与组里头像的 `size` 写成一样;缺省 medium |