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

Avatar slot

Avatar externalClasses