mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-14 09:20:51 +08:00
4560adfdf8
* refactor(style): adjust component size to large/default/small * refactor(components): avatar size & use flex instead of block * refactor(components): adjust check button size * refactor(components): adjust tag size * refactor(components): adjust size doc * fix(components): datetime-picker demo style width * refactor(components): color-picker size & block to flex * refactor(components): adjust slider input size * refactor(components): adjust radio input size for demo * refactor(components): adjust select size & docs * refactor(components): adjust form radio size & docs * refactor(components): add windicss for docs * refactor(components): adjust skeleton avatar size to css var * refactor(components): simplify typography size demo * refactor(components): adjust dropdown size & demo * refactor(components): adjust descriptions size * fix(components): datetime-picker showcase class pollute global button * chore(ci): upgrade docs dependencies to fix ci * fix(ci): add highlight because vitepress not export it * fix(ci): disable line for no-console * fix(ci): remove mini to fix test * fix(style): code font size * fix(style): button span flex style * fix(style): button padding horizontal default 15px * refactor(components): adjust tag padding size & demo * refactor(components): adjust form line-height for input * refactor(components): adjust dropdown menu size & button padding * fix(style): picker separator block to flex center * fix: dropdown button span items-center * style: adjust input-with-icon & size demo & fix input vitepress load * chore: upgrade dependencies * chore: upgrade dependencies * ci: fix website build * ci: regenerate pnpm-lock.yaml * ci: use dev pnpm-lock * ci: update pnpm-lock.yaml
139 lines
4.0 KiB
Markdown
139 lines
4.0 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 |
|
|
|
|
<style lang="scss">
|
|
.example-showcase {
|
|
.demo-basic {
|
|
text-align: center;
|
|
|
|
.demo-basic--circle,
|
|
.demo-basic--square {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.block {
|
|
flex: 1;
|
|
}
|
|
|
|
.block:not(:last-child) {
|
|
border-right: 1px solid var(--el-border-color-base);
|
|
}
|
|
}
|
|
|
|
.el-col:not(:last-child) {
|
|
border-right: 1px solid var(--el-border-color-base);
|
|
}
|
|
}
|
|
|
|
.sub-title {
|
|
margin-bottom: 10px;
|
|
font-size: 14px;
|
|
color: var(--el-text-color-secondary);
|
|
}
|
|
|
|
|
|
|
|
.demo-type {
|
|
display: flex;
|
|
|
|
> div {
|
|
flex: 1;
|
|
text-align: center;
|
|
}
|
|
|
|
> div:not(:last-child) {
|
|
border-right: 1px solid var(--el-border-color-base);
|
|
}
|
|
}
|
|
|
|
.demo-fit {
|
|
display: flex;
|
|
text-align: center;
|
|
justify-content: space-between;
|
|
|
|
.block {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 0;
|
|
}
|
|
|
|
.title {
|
|
margin-bottom: 10px;
|
|
font-size: 14px;
|
|
color: var(--el-text-color-secondary);
|
|
}
|
|
}
|
|
}
|
|
</style>
|