mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-14 09:20:51 +08:00
4.0 KiB
4.0 KiB
| lang | type |
|---|---|
| en-US | component |
Avatar
Avatars can be used to represent people or objects. It supports images, Icons, or characters.
Basic
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 when image load error
fallback when image load error
:::demo
avatar/fallback
:::
How the image fit its container
Set how the image fit its container for an image avatar, same as object-fit.
:::demo
avatar/fit
:::
Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| icon | set representation type to Icon, more info on Icon Component | string | ||
| size | set avatar size | number/string | number / large / medium / small | large |
| shape | set avatar shape | string | circle / square | circle |
| src | the address of the image for an image avatar | string | ||
| srcSet | A list of one or more strings separated by commas indicating a set of possible image sources for the user agent to use | string | ||
| alt | This attribute defines an alternative text description of the image | string | ||
| fit | set how the image fit its container for an image avatar | string | fill / contain / cover / none / scale-down | cover |
Events
| Event Name | Description | Parameters |
|---|---|---|
| error | handler when img load error, return false to prevent default fallback behavior | (e: Event) |
Slots
| Name | Description |
|---|---|
| default | customize avatar content |