mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-14 09:20:51 +08:00
73 lines
2.9 KiB
Markdown
73 lines
2.9 KiB
Markdown
---
|
|
title: Avatar
|
|
lang: en-US
|
|
---
|
|
|
|
# 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](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).
|
|
|
|
:::demo
|
|
|
|
avatar/fit
|
|
|
|
:::
|
|
|
|
## Attributes
|
|
|
|
| Attribute | Description | Type | Accepted Values | Default |
|
|
| --------- | ---------------------------------------------------------------------------------------------------------------------- | ------------------ | ------------------------------------------ | ------- |
|
|
| icon | set representation type to Icon, more info on Icon Component | string / Component | | |
|
|
| size | set avatar size | number / string | number / large / default /small | default |
|
|
| 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 |
|