@xwink/ui

    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

    名称类型默认值说明
    srcstring | undefinedundefined图片地址;缺省或加载失败时显示 `name` 的首字
    namestring | undefinedundefined用户名:取首字作占位,也是图片的替代文字
    size"small" | "medium" | "large" | undefined"medium"边长,缺省 medium(2rem)

    XAvatarGroup

    Props

    名称类型默认值说明
    maxnumber | undefinedundefined最多显示几个,多的折成「+N」
    size"small" | "medium" | "large" | undefined"medium"「+N」的边长,与组里头像的 `size` 写成一样;缺省 medium