Avatar: Add avatar component (ElemeFE#16144)

* add avatar component * 1. add test 2. add types 3. refine doc 4. add img attr * add props in types and doc * refine how image fit its container * fix doc * refine doc * change default background color * remote style demo from doc * add theme * add demo on theme preview and change var name
gurufocus · Mar 16, 2022 · 76752da · 76752da
1 parent 2fc9db8
commit 76752da
Show file tree

Hide file tree

Showing 28 changed files with 1,526 additions and 17 deletions.
diff --git a/components.json b/components.json
@@ -74,5 +74,6 @@
   "divider": "./packages/divider/index.js",
   "image": "./packages/image/index.js",
   "calendar": "./packages/calendar/index.js",
-  "drawer": "./packages/drawer/index.js"
+  "drawer": "./packages/drawer/index.js",
+  "avatar": "./packages/avatar/index.js"
 }
diff --git a/examples/components/theme/components-preview.vue b/examples/components/theme/components-preview.vue
@@ -25,6 +25,10 @@
   .el-carousel__item:nth-child(2n + 1) {
     background-color: #d3dce6;
   }
+
+  .el-avatar:not(:last-child) {
+    margin-right: 20px;
+  }
 }
 </style>
 <template>
@@ -140,7 +144,7 @@
     </el-row>
     <h4>Rate</h4>
     <el-row>
-      <el-rate class="demo-line" v-model="rate"></el-rate> 
+      <el-rate class="demo-line" v-model="rate"></el-rate>
       <el-rate
         class="demo-line"
         v-model="rate"
@@ -354,6 +358,12 @@
         </el-collapse-item>
       </el-collapse>
     </el-row>
+    <h4>Avatar</h4>
+    <el-row>
+      <el-avatar icon="el-icon-user-solid"/>
+      <el-avatar> avatar </el-avatar>
+      <el-avatar shape="square" :size="60" fit="contain" :src="avatarData.url"></el-avatar>
+    </el-row>
   </div>
 </template>
 <script>
@@ -511,6 +521,9 @@ export default {
       defaultTreeProps: {
         children: 'children',
         label: 'label'
+      },
+      avatarData: {
+        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
       }
     };
   }

diff --git a/examples/demo-styles/avatar.scss b/examples/demo-styles/avatar.scss
@@ -0,0 +1,62 @@
+.demo-avatar {
+
+  &.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 rgba(224, 230, 237, 0.5);
+      }
+    }
+
+  }
+
+  .sub-title {
+    margin-bottom: 10px;
+    font-size: 14px;
+    color: #8492a6;
+  }
+
+  .el-col:not(:last-child) {
+    border-right: 1px solid rgba(224,230,237,.5);
+  }
+
+  .demo-type {
+    display: flex;
+
+    >div {
+      flex: 1;
+      text-align: center;
+    }
+
+    >div:not(:last-child) {
+      border-right: 1px solid rgba(224,230,237,.5);
+    }
+  }
+
+  .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: #8492a6;
+    }
+  }
+}
diff --git a/examples/demo-styles/index.scss b/examples/demo-styles/index.scss
@@ -42,4 +42,5 @@
 @import "./divider.scss";
 @import "./image.scss";
 @import "./drawer.scss";
+@import "./avatar.scss";
 
diff --git a/examples/docs/en-US/avatar.md b/examples/docs/en-US/avatar.md
@@ -0,0 +1,145 @@
+## Avatar 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
+```html
+<template>
+  <el-row class="demo-avatar demo-basic">
+    <el-col :span="12">
+      <div class="sub-title">circle</div>
+      <div class="demo-basic--circle">
+        <div class="block"><el-avatar :size="50" :src="circleUrl"></el-avatar></div>
+        <div class="block" v-for="size in sizeList" :key="size">
+          <el-avatar :size="size" :src="circleUrl"></el-avatar>
+        </div>
+      </div>
+    </el-col>  
+    <el-col :span="12">
+      <div class="sub-title">square</div>
+      <div class="demo-basic--circle">
+        <div class="block"><el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar></div>
+        <div class="block" v-for="size in sizeList" :key="size">
+          <el-avatar shape="square" :size="size" :src="squareUrl"></el-avatar>
+        </div>
+      </div>
+    </el-col> 
+  </el-row>
+</template>
+<script>
+  export default {
+    data () {
+      return {
+        circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
+        squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
+        sizeList: ["large", "medium", "small"]
+      }
+    }
+  }
+</script>
+
+```
+:::
+
+### Types
+
+It supports images, Icons, or characters
+
+:::demo
+```html
+<template>
+  <div class="demo-type">
+    <div>
+      <el-avatar icon="el-icon-user-solid"></el-avatar>
+    </div>
+    <div>
+      <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
+    </div>
+    <div>
+      <el-avatar> user </el-avatar>
+    </div>
+  </div>
+</template>
+```
+:::
+
+### Fallback when image load error
+
+fallback when image load error
+
+:::demo
+```html
+<template>
+  <div class="demo-type">
+    <el-avatar :size="60" src="https://empty" @error="errorHandler">
+      <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
+      </el-avatar>
+  </div>
+</template>
+<script>
+  export default {
+    methods: {
+      errorHandler() {
+        return true
+      }
+    }
+  }
+</script>
+
+```
+:::
+
+### 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
+```html
+<template>
+  <div class="demo-fit">
+    <div class="block" v-for="fit in fits" :key="fit">
+        <span class="title">{{ fit }}</span>
+        <el-avatar shape="square" :size="100" :fit="fit" :src="url"></el-avatar>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
+        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
+      }
+    }
+  }
+</script>
+
+```
+:::
+
+### 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)  |
+
+### Slot
+
+| Slot Name | Description | 
+| default  | customize avatar content |