Visually represents a user or an object and their features.
Properties
Property | Type | Required | Default value | Description |
size | 'x-small' | 'small' | 'medium' | 'large' | No | 'medium' | x-small: 80 × 80 small: 88 × 88 medium: 104 × 104 large: 120 × 120 |
src | string | No | - | The URL of the profile picture. The default is a built-in gray image. |
name | string | No | - | The first line of information. |
desc | string | No | - | The second line of additional information. This is not displayed if `name` does not exist. This is not displayed if `size` is set to `x-small`. |
className | string | No | - | The class name. |
Style classes
Class name | Description |
amd-avatar | The overall style. |
amd-avatar-src | The image style. |
amd-avatar-content | The style for the avatar description. |
amd-avatar-name | The style for `name`. |
amd-avatar-desc | The style for `desc`. |
Code examples
Basic usage
The following is an example of an 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 Sizes">
<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 a List" padding="0">
<list-item>
<avatar name="Novlee Spicer" desc="Deserunt dolor ea eaque eos" src="{{images[0]}}" />
</list-item>
<list-item>
<avatar desc="If only desc is provided, name is not displayed" src="{{images[0]}}" />
</list-item>
<list-item>
<avatar name="If size=x-small, desc is not displayed" desc="Summary information" size="x-small" src="{{images[0]}}" />
</list-item>
</demo-block>
</view>The following is an example of an 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 is an example of an 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 is an example of an 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"
}
}