avatar.md 2.4 KB
title: Avatar
lang: en-US
Avatar
Avatars can be used to represent people or objects. It supports images, Icons, or characters.
Basic Usage
Use shape and size prop to set avatar's shape and size.
:::demo
avatar/basic
:::
Types
It supports images, Icons, or characters.
:::demo
avatar/types
:::
Fallback
fallback when image load error.
:::demo
avatar/fallback
:::
Fit Container
Set how the image fit its container for an image avatar, same as object-fit.
:::demo
avatar/fit
:::
Avatar API
Avatar Attributes
| Name | Description | Type | Default | Required |
|---|---|---|---|---|
icon |
representation type to icon, more info on icon component. | string \| Component |
— | No |
size |
avatar size. | number \| 'large' \| 'default' \| 'small' |
'default' |
No |
shape |
avatar shape. | 'circle' \| 'square' |
'circle' |
No |
src |
the source of the image for an image avatar. | string |
— | No |
src-set |
native attribute srcset of image avatar. |
string |
— | No |
alt |
native attribute alt of image avatar. |
string |
— | No |
fit |
set how the image fit its container for an image avatar. | 'fill' \| 'contain' \| 'cover' \| 'none' \| 'scale-down' |
'cover' |
No |
Avatar Events
| Name | Description | Type |
|---|---|---|
error |
trigger when image load error. | (e: Event) => void |
Avatar Slots
| Name | Description |
|---|---|
default |
customize avatar content. |