Avatar

You can use the avatar component to display avatars.

Sample code

See the sample codes in different languages:

.js

copy
{
  "defaultTitle": "Avatar",
  "usingComponents": {
    "avatar": "mini-ali-ui/es/avatar/index"
  }
}

.axml

copy
<view>
  <!--normal avatar-->
  <avatar src="xxxx" shape="standard"/>
  <!--avatar with username and short description-->
  <avatar src="xxxx" size="lg" name="username" desc="abstract description" shape="standard" />
</view>

Parameters

Property

Type

Description

className

String

Customized class.
srcString

Source of the avatar image. The default value is Default avatar with blue background.

sizeString

Avatar size. Valid values are:

  • lg
  • md
  • sm
  • xs

The default value is md.

shape

String

Avatar shape. Valid values are:

  • standard
  • circle
  • square

The default value is circle.

nameString

Username.

descString

Short description about the user.

onErrorEventHandle

The event that is triggered when the avatar is failed to be loaded. The default value is (e: Object) => void.