头像
头像是用图片、图标或者文字的形式展示用户及具有特殊标识的其他对象。
基本使用
为元素并添加类 .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 | 头像默认背景颜色 |