molong/colorui-doc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mjz update

Browse Source
This commit is contained in:
mjz
2023-05-28 22:33:23 +08:00
parent f522f60f80
commit 31b64e1e46
69 changed files with 491 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
docs/10.文档/20.基础元素/70.头像.md
View File

@@ -5,10 +5,90 @@ permalink: /pages/basics/avatar
article: false
---
## 头像
::: details 点此查看页面源代码
页面位置：`/pages/basics/avatar`
```vue
## 头像形状
> css 代码
```css
.cu-avatar 默认　
.cu-avatar round 圆
.cu-avatar radius 圆角
```
:::
> 演示代码
```vue
<view class='cu-avatar'>默认</view>
<view class='cu-avatar round'>椭圆</view>
<view class='cu-avatar radius'>圆角</view>
```
## 头像尺寸
> css 代码
```css
.cu-avatar sm 小 48upx / 24px
.cu-avatar 普通 64upx / 32px
.cu-avatar lg 大 96upx / 48px
.cu-avatar xl 较大 128upx / 64px
```
> 演示代码
```vue
<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`，该容器内添加文字或者图标。
> 演示代码
```vue
<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|...`，该容器内添加文字或者图标。
> 演示代码
```vue
<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`，该容器内放置头像即可
> 演示代码
```vue
<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>
```
## 头像标签
父容器是头像，该容器内是数字标签。
> 演示代码
```vue
<view class="cu-avatar radius bg-red margin-left">
<view class="cu-tag badge cuIcon-male bg-blue"></view>
</view>
```