An avatar is a representation of a user or an object. It can display features of a person or an object more intuitively.
Property
Property | Type | Required | Default value | Description |
size | 'x-small' | 'small' | 'medium' | 'large' | No | 'medium' | x-small: 80 x 80 small: 88 x 88 medium: 104 x 104 large: 120 x 120 |
src | string | No | - | The source URL of an avatar. The default image is a built-in image in gray. |
name | string | No | - | The information on the first row. |
desc | string | No | - | The additional information on the second row. When the name property does not exist, this property is not displayed. When the value of size is x-small, this property is not displayed. |
className | string | No | - | The class name. |
Style class
Class name | Description |
amd-avatar | The style of the entire avatar. |
amd-avatar-src | The image style. |
amd-avatar-content | The style of the avatar description. |
amd-avatar-name | The name style. |
amd-avatar-desc | The desc style. |
Code sample
Basic usage
The following shows an example of the code in the index.axml file:
<view class="demo">
<demo-block title="Basic usage - Four sizes">
<view class="demo-list">
<view class="list-item" a:for="{{images}}">
<avatar src="{{item}}" />
</view>
</view>
</demo-block>
<demo-block title="placeholder avatar">
<avatar/>
</demo-block>
<demo-block title="different size">
<view class="demo-list">
<view class="list-item" a:for="{{sizes}}">
<avatar size="{{item}}" src="{{images[0]}}" />
</view>
</view>
</demo-block>
<demo-block title="Use with lists" padding="0">
<list-item>
<avatar name="Novlee Spicer" desc="Deserunt dolor ea eaque eos" src="{{images[0]}}" />
</list-item>
<list-item>
<avatar desc="When there is only desc, the name is not displayed" src="{{images[0]}}" />
</list-item>
<list-item>
<avatar name="When size=x-small, desc is not displayed" desc="summary information" size="x-small" src="{{images[0]}}" />
</list-item>
</demo-block>
</view>The following shows an example of the code in the index.js file:
Page({
data: {
sizes: ['x-small', 'small', 'medium', 'large'],
images: [
'https://images.example.com/photo-1548532928-b34e3be62fc6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
'https://images.example.com/photo-1493666438817-866a91353ca9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=b616b2c5b373a80ffc9636ba24f7a4a9',
'https://images.example.com/photo-1542624937-8d1e9f53c1b9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
'https://images.example.com/photo-1546967191-fdfb13ed6b1e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
],
},
});The following shows an example of the code in the index.acss file:
.demo-list {
display: flex;
align-items: flex-start;
}
.list-item {
margin-right: 24rpx;
text-align: left;
}
.list-item .size-text {
padding-top: 12rpx;
}The following shows an example of the code in the index.json file:
{
"defaultTitle": "Avatar",
"usingComponents": {
"avatar": "antd-mini/es/Avatar/index",
"list-item": "antd-mini/es/List/ListItem/index",
"demo-block": "../../components/DemoBlock/index"
}
}