Skip to content

头像

头像是用图片、图标或者文字的形式展示用户及具有特殊标识的其他对象。

基本使用

为元素并添加类 .avatar,然后将作为图像的图片、文字或图标放置在此元素内。

Z

提示

当使用文字作为头像时,建议文字数目不要超过 2 个,如果需要显示更多文字进行个性化排版,推荐使用 JavaScript 增强的头像插件。

头像形状

搭配 CSS 工具类 rounded-* 为头像应用不同的圆角样式。

外观类型

当使用文字或图标作为头像时,配合使用CSS 工具类来实现不同头像的外观。下面展示各种工具类的外观效果。

Z
Z
Z
Z

尺寸

除了默认大小,还提供了额外的 4 种预设尺寸,通过 size-* 来为头像设置尺寸。

X
S
Z
LG
XL

CSS 类

头像提供了如下 CSS 类:

类型作用
avatar实体类元素作为头像组件
size-xs工具类头像使用超小号尺寸
size-sm工具类头像使用小号尺寸
size-lg工具类头像使用大号尺寸
size-xl工具类头像使用超大号尺寸

CSS 变量

头像提供了如下 CSS 变量,可进行全局修改:

CSS 变量名作用
--avatar-radius头像默认圆角大小
--avatar-bg头像默认背景颜色

参考