mirror of
https://github.com/element-plus/element-plus.git
synced 2026-03-13 07:51:17 +08:00
ecb4b0117e
* docs(components): [avatar] * Update avatar documentation per new design. * Move AvatarInstance to instance.ts for better readabilties. * chore: remove backquote * chore: update keywords to all-lowercase * chore: refinement Co-authored-by: JeremyWuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com>
75 lines
2.3 KiB
Markdown
75 lines
2.3 KiB
Markdown
---
|
|
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](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).
|
|
|
|
:::demo
|
|
|
|
avatar/fit
|
|
|
|
:::
|
|
|
|
## API
|
|
|
|
### Attributes
|
|
|
|
| Name | Description | Type | Default |
|
|
| ------- | --------------------------------------------------------- | ----------------------------------------------------------------- | ------- |
|
|
| icon | representation type to icon, more info on icon component. | ^[string] / ^[Component] | — |
|
|
| size | avatar size. | ^[number] / ^[enum]`'large' \| 'default' \| 'small'` | default |
|
|
| shape | avatar shape. | ^[enum]`'circle' \| 'square'` | circle |
|
|
| src | the source of the image for an image avatar. | `string` | — |
|
|
| src-set | native attribute `srcset` of image avatar. | `string` | — |
|
|
| alt | native attribute `alt` of image avatar. | `string` | — |
|
|
| fit | set how the image fit its container for an image avatar. | ^[enum]`'fill' \| 'contain' \| 'cover' \| 'none' \| 'scale-down'` | cover |
|
|
|
|
### Events
|
|
|
|
| Name | Description | Type |
|
|
| ----- | ------------------------------ | ------------------------------- |
|
|
| error | trigger when image load error. | ^[Function]`(e: Event) => void` |
|
|
|
|
### Slots
|
|
|
|
| Name | Description |
|
|
| ------- | ------------------------- |
|
|
| default | customize avatar content. |
|