mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-18 12:34:25 +08:00
doc(avatar)
This commit is contained in:
parent
607e98de0b
commit
3b50bb7ca0
@ -1,7 +1,7 @@
|
||||
# Badge
|
||||
|
||||
Using it with badge would be nice (if you like tons of notifications).
|
||||
```html
|
||||
<n-badge value="666">
|
||||
<n-avatar>666</n-avatar>
|
||||
<n-badge value="999+">
|
||||
<n-avatar>App</n-avatar>
|
||||
</n-badge>
|
||||
```
|
@ -1,5 +1,5 @@
|
||||
# Color
|
||||
|
||||
Color is depend on you even in different theme. You can set it to something related to things you want to eat.
|
||||
```html
|
||||
<n-avatar :themed-style="{
|
||||
light: {
|
||||
@ -10,5 +10,5 @@
|
||||
color: 'red',
|
||||
backgroundColor: 'yellow'
|
||||
}
|
||||
}">Liu<br>Dehua</n-avatar>
|
||||
}">M</n-avatar>
|
||||
```
|
@ -1,4 +1,5 @@
|
||||
# Icon
|
||||
I like using icon in avatar.
|
||||
```html
|
||||
<n-avatar>
|
||||
<n-icon>
|
||||
|
@ -1,4 +1,6 @@
|
||||
# Avatar
|
||||
On the Internet, nobody knows you're a dog, even if you use a dog picture as avatar.
|
||||
## Demos
|
||||
```demo
|
||||
size
|
||||
shape
|
||||
@ -6,4 +8,16 @@ color
|
||||
badge
|
||||
icon
|
||||
name-size
|
||||
```
|
||||
```
|
||||
## Props
|
||||
|Name|Type|Default|Description|
|
||||
|-|-|-|-|
|
||||
|size|`'small' \| 'medium' \| 'large' \| 'huge'`| `'medium'`||
|
||||
|src|`string`|`null`||
|
||||
|round|`boolean`|`false`||
|
||||
|themed-style|`object`|`null`||
|
||||
|
||||
## Slots
|
||||
|Name|Parameters|Description|
|
||||
|-|-|-|
|
||||
|default|()||
|
@ -1,16 +1,22 @@
|
||||
# Name Size
|
||||
# Content Size
|
||||
Words' sizing would be auto adjusted in avatar.
|
||||
```html
|
||||
<n-avatar>{{ value }}</n-avatar>
|
||||
<n-avatar circle>{{ value }}</n-avatar>
|
||||
<n-avatar circle>Liu<br>{{ value }}</n-avatar>
|
||||
<n-avatar circle>the <br>{{ value }}</n-avatar>
|
||||
<n-input v-model="value"/>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
value: 'Dehua'
|
||||
value: 'Oasis'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
```css
|
||||
.n-avatar {
|
||||
margin: 0 8px 12px 0;
|
||||
}
|
||||
```
|
@ -8,3 +8,9 @@ Avatar can be circle shaped.
|
||||
<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"/>
|
||||
```
|
||||
|
||||
```css
|
||||
.n-avatar {
|
||||
margin: 0 8px 12px 0;
|
||||
}
|
||||
```
|
||||
|
@ -8,3 +8,9 @@ Avatar has `small`, `medium` and `large` size.
|
||||
<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"/>
|
||||
```
|
||||
|
||||
```css
|
||||
.n-avatar {
|
||||
margin: 0 8px 12px 0;
|
||||
}
|
||||
```
|
||||
|
2
index.js
2
index.js
@ -54,7 +54,7 @@ import ConfigConsumer from './packages/common/ConfigConsumer'
|
||||
import Descriptions from './packages/common/Descriptions'
|
||||
import List from './packages/common/List'
|
||||
import Menu from './packages/common/Menu'
|
||||
import Avatar from './packages/common/Avator'
|
||||
import Avatar from './packages/common/Avatar'
|
||||
import Result from './packages/common/Result'
|
||||
import Thing from './packages/common/Thing'
|
||||
import AutoComplete from './packages/common/AutoComplete'
|
||||
|
8
packages/common/Avatar/index.js
Normal file
8
packages/common/Avatar/index.js
Normal file
@ -0,0 +1,8 @@
|
||||
/* istanbul ignore file */
|
||||
import Avatar from './src/main.vue'
|
||||
|
||||
Avatar.install = function (Vue) {
|
||||
Vue.component(Avatar.name, Avatar)
|
||||
}
|
||||
|
||||
export default Avatar
|
106
packages/common/Avatar/src/main.vue
Normal file
106
packages/common/Avatar/src/main.vue
Normal file
@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<span
|
||||
class="n-avatar"
|
||||
:class="{
|
||||
[`n-avatar--${size}-size`]: typeof size !== 'number',
|
||||
[`n-avatar--circle-shaped`]: circle || round,
|
||||
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
|
||||
}"
|
||||
:style="{
|
||||
width: styleWidth,
|
||||
height: styleWidth,
|
||||
borderRadius: styleBorderRadius,
|
||||
...synthesizedStyle
|
||||
}"
|
||||
>
|
||||
<img v-if="!$slots.default && src" :src="src">
|
||||
<slot v-else-if="$slots.icon" name="icon" />
|
||||
<span
|
||||
v-else
|
||||
ref="text"
|
||||
class="n-avatar__text"
|
||||
:style="{
|
||||
transform: styleTransfrom,
|
||||
backgroundColor: color
|
||||
}"
|
||||
>
|
||||
<slot />
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import withapp from '../../../mixins/withapp'
|
||||
import themeable from '../../../mixins/themeable'
|
||||
import asthemecontext from '../../../mixins/asthemecontext'
|
||||
|
||||
export default {
|
||||
name: 'NAvatar',
|
||||
mixins: [withapp, themeable, asthemecontext],
|
||||
props: {
|
||||
size: {
|
||||
type: [String, Number],
|
||||
default: 'medium'
|
||||
},
|
||||
src: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
circle: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
round: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
ratio: 1
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
styleTransfrom () {
|
||||
if (this.ratio !== 1) return `translateX(-50%) translateY(-50%) scale(${this.ratio})`
|
||||
return 'translateX(-50%) translateY(-50%)'
|
||||
},
|
||||
styleWidth () {
|
||||
if (typeof this.size === 'number') {
|
||||
return `${this.size}px`
|
||||
}
|
||||
return null
|
||||
},
|
||||
styleBorderRadius () {
|
||||
if (!this.circle && !this.round) return null
|
||||
if (typeof this.size === 'number') {
|
||||
return `${this.size / 2}px`
|
||||
}
|
||||
return null
|
||||
}
|
||||
},
|
||||
updated () {
|
||||
this.adjustText()
|
||||
},
|
||||
mounted () {
|
||||
this.adjustText()
|
||||
},
|
||||
methods: {
|
||||
adjustText () {
|
||||
if (this.$refs.text) {
|
||||
const elWidth = this.$el.offsetWidth
|
||||
const textWidth = this.$refs.text.offsetWidth
|
||||
const elHeight = this.$el.offsetHeight
|
||||
const textHeight = this.$refs.text.offsetHeight
|
||||
const radix = (this.circle || this.round) ? 0.75 : 0.85
|
||||
const ratio = Math.min(elWidth / textWidth * radix, elHeight / textHeight * radix)
|
||||
this.ratio = Math.min(1, ratio)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
Loading…
Reference in New Issue
Block a user