colorui-doc/docs/10.文档/20.基础元素/70.头像.md

title, date, permalink, article

title	date	permalink	article
头像	2023-05-28 16:15:38	/pages/basics/avatar	false

需要设置成头像的元素加上 class 类名 cu-avatar，然后再设置 css 样式 background-image 即可

头像形状

css 代码

.cu-avatar  默认　
.cu-avatar round  圆
.cu-avatar radius  圆角

演示代码

<view class='cu-avatar'>默认</view>
<view class='cu-avatar round'>椭圆</view>
<view class='cu-avatar radius'>圆角</view>

头像尺寸

css 代码

.cu-avatar sm  小    48upx / 24px
.cu-avatar     普通  64upx / 32px
.cu-avatar lg  大    96upx / 48px
.cu-avatar xl  较大  128upx / 64px

演示代码

<view class='cu-avatar radius sm'>小尺寸</view>
<view class='cu-avatar radius'></view>
<view class='cu-avatar radius lg'></view>
<view class='cu-avatar radius xl'></view>

内嵌文字（图标）

父容器加上 .cu-avatar，该容器内添加文字或者图标。

演示代码

<view class="cu-avatar radius">
    <text class="cuIcon-people"></text>
</view>
<view class="cu-avatar radius margin-left">
    <text>港</text>
</view>

头像颜色

父容器加上 .cu-avatar .bg-red|...，该容器内添加文字或者图标。

演示代码

<view class="cu-avatar radius bg-red">
    <text class="cuIcon-people"></text>
</view>
<view class="cu-avatar radius bg-red margin-left">
    <text>港</text>
</view>

头像组

父容器加上 cu-avatar-group，该容器内放置头像即可

演示代码

<view class="cu-avatar-group">
    <view class="cu-avatar radius bg-red">
        <text class="cuIcon-people"></text>
    </view>
    <view class="cu-avatar radius bg-red margin-left">
        <text>港</text>
    </view>
</view>

头像标签

父容器是头像，该容器内是数字标签。

演示代码

<view class="cu-avatar radius bg-red margin-left">
    <view class="cu-tag badge cuIcon-male bg-blue"></view>
</view>