mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-03-31 14:20:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

avatar-zhcn

Browse Source
This commit is contained in:
liumeo 2019-12-02 02:06:07 +08:00
parent 86c9c52949
commit 5429638435
8 changed files with 88 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo/documentation/components/avatar/enUS/shape.md
View File

@ -1,4 +1,4 @@
# Size
# Shape
Avatar can be circle shaped.

7
demo/documentation/components/avatar/zhCN/badge.md Normal file
View File

@ -0,0 +1,7 @@
# 徽标
```html
<n-badge value="666">
<n-avatar>666</n-avatar>
</n-badge>
```

14
demo/documentation/components/avatar/zhCN/color.md Normal file
View File

@ -0,0 +1,14 @@
# 颜色
```html
<n-avatar :themed-style="{
light: {
color: 'yellow',
backgroundColor: 'red'
},
dark: {
color: 'red',
backgroundColor: 'yellow'
}
}">Liu<br>Dehua</n-avatar>
```

21
demo/documentation/components/avatar/zhCN/icon.md Normal file
View File

@ -0,0 +1,21 @@
# 图标
```html
<n-avatar>
<n-icon>
<md-cash />
</n-icon>
</n-avatar>
```
```js
import mdCash from 'naive-ui/lib/icons/md-cash'
import mdContacts from 'naive-ui/lib/icons/md-contacts'
import iosContacts from 'naive-ui/lib/icons/ios-contacts'
export default {
components: {
mdCash,
mdContacts,
iosContacts
}
}
```

9
demo/documentation/components/avatar/zhCN/index.md
View File

@ -0,0 +1,9 @@
# 头像
```demo
size
shape
color
badge
icon
name-size
```

16
demo/documentation/components/avatar/zhCN/nameSize.md Normal file
View File

@ -0,0 +1,16 @@
# 字号
```html
<n-avatar>{{ value }}</n-avatar>
<n-avatar circle>{{ value }}</n-avatar>
<n-avatar circle>刘<br>{{ value }}</n-avatar>
<n-input v-model="value"/>
```
```js
export default {
data () {
return {
value: '德华'
}
}
}
```

10
demo/documentation/components/avatar/zhCN/shape.md Normal file
View File

@ -0,0 +1,10 @@
# 形状
头像可以是圆形。
```html
<n-avatar circle size="small" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573566445479&di=8804b1996cbf89582232a3994665454c&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3628555514%2C2933400515%26fm%3D214%26gp%3D0.jpg"/>
<n-avatar circle size="medium" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573566445479&di=8804b1996cbf89582232a3994665454c&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3628555514%2C2933400515%26fm%3D214%26gp%3D0.jpg"/>
<n-avatar circle size="large" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573566445479&di=8804b1996cbf89582232a3994665454c&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3628555514%2C2933400515%26fm%3D214%26gp%3D0.jpg"/>
<n-avatar circle :size="48" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573566445479&di=8804b1996cbf89582232a3994665454c&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3628555514%2C2933400515%26fm%3D214%26gp%3D0.jpg"/>
```

10
demo/documentation/components/avatar/zhCN/size.md Normal file
View File

@ -0,0 +1,10 @@
# 尺寸
头像有 `small`、`medium`、`large` 尺寸。
```html
<n-avatar size="small" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573566445479&di=8804b1996cbf89582232a3994665454c&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3628555514%2C2933400515%26fm%3D214%26gp%3D0.jpg"/>
<n-avatar size="medium" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573566445479&di=8804b1996cbf89582232a3994665454c&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3628555514%2C2933400515%26fm%3D214%26gp%3D0.jpg"/>
<n-avatar size="large" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573566445479&di=8804b1996cbf89582232a3994665454c&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3628555514%2C2933400515%26fm%3D214%26gp%3D0.jpg"/>
<n-avatar :size="48" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573566445479&di=8804b1996cbf89582232a3994665454c&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3628555514%2C2933400515%26fm%3D214%26gp%3D0.jpg"/>
```