Avatar

2024-05-31 10:14

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.
src	String	Source of the avatar image. The default value is `Default avatar with blue background`.
size	String	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`.
name	String	Username.
desc	String	Short description about the user.
onError	EventHandle	The event that is triggered when the avatar is failed to be loaded. The default value is `(e: Object) => void`.