Avatar 头像
用来代表用户或事物,支持图片、图标或字符展示。
使用指南
在 page.json 中引入组件
{
"navigationBarTitleText": "Avatar",
"usingComponents": {
"wux-avatar": "../../dist/avatar/index"
}
}
示例
<view class="page">
<view class="page__hd">
<view class="page__title">Avatar</view>
<view class="page__desc">头像</view>
</view>
<view class="page__bd page__bd_spacing">
<view class="sub-title">Default</view>
<view>
<wux-avatar size="small">U</wux-avatar>
<wux-avatar>U</wux-avatar>
<wux-avatar size="large">U</wux-avatar>
</view>
<view class="sub-title">Shape = square</view>
<view>
<wux-avatar shape="square" size="small">U</wux-avatar>
<wux-avatar shape="square">U</wux-avatar>
<wux-avatar shape="square" size="large">U</wux-avatar>
</view>
<view class="sub-title">Custom Style</view>
<view>
<wux-avatar wux-class="wux-avatar--custom" size="small">U</wux-avatar>
<wux-avatar body-style="background-color: #11c1f3">U</wux-avatar>
<wux-avatar body-style="background-color: #33cd5f" size="large">U</wux-avatar>
</view>
<view class="sub-title">Scale</view>
<view>
<wux-avatar scale size="small">Wux</wux-avatar>
<wux-avatar scale>Weapp</wux-avatar>
<wux-avatar scale size="large">Skyvow</wux-avatar>
</view>
<view class="sub-title">Src</view>
<view>
<wux-avatar size="small" src="https://wux.cdn.cloverstd.com/logo.png" />
<wux-avatar src="https://wux.cdn.cloverstd.com/logo.png" />
<wux-avatar size="large" src="https://wux.cdn.cloverstd.com/logo.png" />
</view>
</view>
</view>
视频演示
Avatar
API
Avatar props
参数 |
类型 |
描述 |
默认值 |
prefixCls |
string |
自定义类名前缀 |
wux-avatar |
shape |
string |
指定头像的形状,可选值为 circle、square |
circle |
size |
string |
设置头像的大小,可选值为 small、default、large |
default |
src |
string |
图片类头像的资源地址 |
- |
bodyStyle |
string,object |
自定义样式 |
- |
scale |
boolean |
是否自动调整大小 |
false |
Avatar slot
Avatar externalClasses