mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2024-11-21 01:02:59 +08:00
Code Issues Packages Projects Releases Wiki Activity
6b886e42a1
element-plus/docs/en-US/component/avatar.md
Jeremy ecb4b0117e
docs(components): [avatar] (#10709) 
* 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>
2022-11-24 22:56:01 +08:00

2.3 KiB
Raw Blame History

title lang
Avatar 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

:::

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.