It is used to represent users or things, and supports the display of pictures, icons or characters.
Examples
Baisc stage
Baisc Stage
User
Support content
Support imgae, icon and string content 支持图片、Icon 以及字符三种类型
Tom
Auto size
Auto adjust content size
KK+2K+2Group
Show in a group
Properties
Avatar
| Property | Description | Type | Default | Require |
|---|---|---|---|---|
| children | content, have to be string type | string | - | false |
| icon | icon | React.ReactNode | - | false |
| shape | shape | circle | square | round | circle | false |
| size | size, could also customize | small | middle | large | number | middle | false |
| src | source for image or image component instance | string | React.ReactNode | - | false |
| srcSet | srcSet for image | string | - | false |
| onError | invoke when image loads failed, default hide image when image loads failed, but if return false, image will always show | function | - | false |
| alt | alt for image | string | - | false |
| gap | gap between border and content | number | 4 | false |
AvatarGroup
| Property | Description | Type | Default | Require |
|---|---|---|---|---|
| children | avatar array | ReactElement[] | - | true |
| popupPlacement | popup box placement, hide when set 'none' | none | top | bottom | top | false |
| shape | shape, act on sub-components | circle | square | round | circle | false |
| size | size, act on sub-components | small | middle | large | number | middle | false |
| maxCount | max avatar number on display | number | - | false |
| maxStyle | extra avatar style | React.CssProperties | - | false |