card demo

components/avatar/Avatar.vue

@@ -1,5 +1,5 @@
 <template>
-  <span :class="classes" :style="styles">
+  <span :class="classes">
     <img v-if="src" :src="src"/>
     <icon v-else-if="icon" :type="icon" />
     <span
@@ -29,10 +29,6 @@ export default {
       validator: (val) => (['small', 'large', 'default'].includes(val)),
       default: 'default',
     },
-    styles: {
-      type: Object,
-      default: () => ({}),
-    },
     src: String,
     icon: String,
   },

components/avatar/demo/badge.md

@@ -0,0 +1,18 @@
+<cn>
+#### 带徽标的头像
+通常用于消息提示。
+</cn>
+
+<us>
+#### With Badge
+Usually used for messages remind.
+</us>
+
+```html
+<template>
+  <div>
+    <span style="marginRight:24px"><a-badge count=1><a-avatar shape="square" icon="user" /></a-badge></span>
+    <a-badge dot><a-avatar shape="square" icon="user" /></a-badge>
+  </div>
+</template>
+```

components/avatar/demo/basic.md

@@ -0,0 +1,25 @@
+<cn>
+#### 基本
+头像有三种尺寸，两种形状可选。
+</cn>
+
+<us>
+#### basic
+Three sizes and two shapes are available.
+</us>
+
+```html
+<template>
+  <div>
+    <a-avatar size="large" icon="user"/>
+    <a-avatar icon="user"/>
+    <a-avatar size="small" icon="user"/>
+  </div>
+  <br/>
+  <div>
+    <a-avatar shape="square" size="large" icon="user" />
+    <a-avatar shape="square" icon="user" />
+    <a-avatar shape="square" size="small" icon="user" />
+  </div>
+</template>
+```

components/avatar/demo/dynamic.md

@@ -0,0 +1,18 @@
+<cn>
+#### 自动调整字符大小
+对于字符型的头像，当字符串较长时，字体大小可以根据头像宽度自动调整。
+</cn>
+
+<us>
+#### Autoset Font Size
+For letter type Avatar, when the letters are too long to display, the font size can be automatically adjusted according to the width of the Avatar.
+</us>
+
+```html
+<template>
+  <div>
+    <a-avatar shape="square" size="large" :style="{'backgroundColor': color}">{{avatarValue}}</a-avatar>
+    <a-button @click="changeValue">改变</a-button>
+  </div>
+</template>
+```

components/avatar/demo/index.vue

@@ -1,39 +1,20 @@
-<template>
-  <div>
-    <div>
-      <a-avatar size="large" icon="user"/>
-      <a-avatar icon="user"/>
-      <a-avatar size="small" icon="user"/>
-    </div>
-    <br/>
-    <div>
-      <a-avatar shape="square" size="large" icon="user" />
-      <a-avatar shape="square" icon="user" />
-      <a-avatar shape="square" size="small" icon="user" />
-    </div>
-    <br/>
-    <div>
-      <a-avatar icon="user" />
-      <a-avatar>U</a-avatar>
-      <a-avatar>USER</a-avatar>
-      <a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
-      <a-avatar :styles="{ color: '#f56a00', backgroundColor: '#fde3cf' }">U</a-avatar>
-      <a-avatar :styles="{ backgroundColor: '#87d068' }" icon="user" />
-    </div>
-    <br/>
-    <div>
-      <a-avatar shape="square" size="large" :styles="{'backgroundColor': color}">{{avatarValue}}</a-avatar>
-      <a-button @click="changeValue">改变</a-button>
-    </div>
-    <br/>
-    <div>
-      <a-badge count=1><a-avatar shape="square" icon="user" /></a-badge>
-      <br/>
-      <a-badge dot><a-avatar shape="square" icon="user" /></a-badge>
-    </div>
-  </div>
-</template>
 <script>
+import Basic from './basic'
+import Badge from './badge'
+import Type from './type'
+import Dynamic from './dynamic'
+import CN from '../index.zh-CN.md'
+import US from '../index.en-US.md'
+
+const md = {
+  cn: `# Avatar头像
+          用来代表用户或事物，支持图片、图标或字符展示。
+          ## 代码演示`,
+  us: `# Avatar
+          Avatars can be used to represent people or objects. It supports images, 'Icon's, or letters.
+          `,
+}
+
 const UserList = ['U', 'Lucy', 'Tom', 'Edward']
 const colorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae']
 export default {
@@ -50,5 +31,24 @@ export default {
       this.color = index < colorList.length - 1 ? colorList[index + 1] : colorList[0]
     },
   },
+  render () {
+    return (
+      <div>
+        <md cn={md.cn} us={md.us}/>
+        <Basic/>
+        <br/>
+        <Badge/>
+        <br/>
+        <Type/>
+        <br/>
+        <api>
+          <template slot='cn'>
+            <CN/>
+          </template>
+          <US/>
+        </api>
+      </div>
+    )
+  },
 }
 </script>

components/avatar/demo/type.md

@@ -0,0 +1,22 @@
+<cn>
+#### 类型
+支持三种类型：图片、Icon 以及字符，其中 Icon 和字符型可以自定义图标颜色及背景色。
+</cn>
+
+<us>
+#### Type
+Image, Icon and letter are supported, and the latter two kinds avatar can have custom colors and background colors.
+</us>
+
+```html
+<template>
+  <div>
+    <a-avatar icon="user" />
+    <a-avatar>U</a-avatar>
+    <a-avatar>USER</a-avatar>
+    <a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
+    <a-avatar style="color: #f56a00; backgroundColor: #fde3cf">U</a-avatar>
+    <a-avatar style="backgroundColor:#87d068" icon="user" />
+  </div>
+</template>
+```

components/avatar/index.en-US.md

@@ -0,0 +1,8 @@
+## API
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| icon | the `Icon` type for an icon avatar, see `Icon` Component | string | - |
+| shape | the shape of avatar | `circle` \| `square` | `circle` |
+| size | the size of the avatar | `large` \| `small` \| `default` | `default` |
+| src | the address of the image for an image avatar | string | - |

components/avatar/index.zh-CN.md

@@ -0,0 +1,8 @@
+## API
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| icon | 设置头像的图标类型，参考 `Icon` 组件 | string | - |
+| shape | 指定头像的形状 | Enum{ 'circle', 'square' } | `circle` |
+| size | 设置头像的大小 | Enum{ 'large', 'small', 'default' } | `default` |
+| src | 图片类头像的资源地址 | string | - |

examples/routes.js

@@ -1,11 +1,11 @@
 import Demo from './components/demo.vue'
 const AsyncComp = () => {
   return {
-    component: import(`../components/button/demo/index.vue`),
+    component: import(`../components/avatar/demo/index.vue`),
   }
 }
 export default [
   { path: '/components/:lang/:name/:demo?', component: Demo },
-  { path: 'test/:name/:demo', component: AsyncComp },
+  { path: '/:lang?/test/:name/:demo?', component: AsyncComp },
   { path: '/*', redirect: '/components/cn/menu' },
 ]