card demo
wangxueliang
parent
2f056fd114
commit
8eaf76bab3
|
|
@ -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,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
```
|
||||
|
|
@ -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>
|
||||
```
|
||||
|
|
@ -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>
|
||||
```
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
```
|
||||
|
|
@ -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 | - |
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| icon | 设置头像的图标类型，参考 `Icon` 组件 | string | - |
|
||||
| shape | 指定头像的形状 | Enum{ 'circle', 'square' } | `circle` |
|
||||
| size | 设置头像的大小 | Enum{ 'large', 'small', 'default' } | `default` |
|
||||
| src | 图片类头像的资源地址 | string | - |
|
||||
|
|
@ -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' },
|
||||
]
|
||||
|
|
|
|||
Loading…
Reference in New Issue