mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-12-09 04:31:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

doc(avatar): fulfill it

Browse Source
This commit is contained in:
07akioni 2019-11-22 13:21:32 +08:00
parent 4278e8d68e
commit 109a2edc79
13 changed files with 142 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

17
demo/documentation/components/avatar/enUS/basic.md
View File

@ -1,17 +0,0 @@
# Basic
```html
<n-avatar 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 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" circle/>
<n-avatar>{{ value }}</n-avatar>
<n-avatar>Liu<br>Dehua</n-avatar>
<n-input v-model="value"/>
```
```js
export default {
data () {
return {
value: '牛'
}
}
}
```

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

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

23
demo/documentation/components/avatar/enUS/icon.md Normal file
View File

@ -0,0 +1,23 @@
# Icon
```html
<n-avatar>
<template v-slot:icon>
<n-icon>
<md-cash />
</n-icon>
</template>
</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
}
}
```

7
demo/documentation/components/avatar/enUS/index.md
View File

@ -1,4 +1,9 @@
# Avatar
```demo
basic
size
shape
color
badge
icon
name-size
```

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

@ -0,0 +1,16 @@
# Name Size
```html
<n-avatar>{{ value }}</n-avatar>
<n-avatar circle>{{ value }}</n-avatar>
<n-avatar circle>Liu<br>{{ value }}</n-avatar>
<n-input v-model="value"/>
```
```js
export default {
data () {
return {
value: 'Dehua'
}
}
}
```

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

@ -0,0 +1,10 @@
# Size
Avatar can be circle shaped.
```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/enUS/size.md Normal file
View File

@ -0,0 +1,10 @@
# Size
Avatar has `small`, `medium` and `large` size.
```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"/>
```

31
packages/common/Avator/src/main.vue
View File

@ -2,8 +2,15 @@
<span
class="n-avatar"
:class="{
[`n-avatar--${size}-size`]: true,
[`n-avatar--circle-shaped`]: circle || round
[`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">
@ -31,7 +38,7 @@ export default {
mixins: [withapp, themeable],
props: {
size: {
type: String,
type: [String, Number],
default: 'medium'
},
src: {
@ -60,6 +67,19 @@ export default {
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 () {
@ -74,8 +94,9 @@ export default {
const elWidth = this.$el.offsetWidth
const textWidth = this.$refs.text.offsetWidth
const elHeight = this.$el.offsetHeight
const textHeight = this.$el.offsetHeight
const ratio = Math.min(elWidth / textWidth * 0.85, elHeight / textHeight * 0.85)
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)
}
}

6
packages/common/Progress/src/main.vue
View File

@ -223,6 +223,8 @@ import mdCheckmark from '../../../icons/md-checkmark'
import mdClose from '../../../icons/md-close'
import mdAlert from '../../../icons/md-alert'
import mdInformationCircle from '../../../icons/md-information-circle'
import mdCheckmarkCircle from '../../../icons/md-checkmark-circle'
import mdCloseCircle from '../../../icons/md-close-circle'
import fontawareable from '../../../mixins/fontawarable'
import withapp from '../../../mixins/withapp'
import themeable from '../../../mixins/themeable'
@ -240,7 +242,9 @@ export default {
mdCheckmark,
mdClose,
mdAlert,
mdInformationCircle
mdInformationCircle,
mdCheckmarkCircle,
mdCloseCircle
},
mixins: [withapp, themeable, fontawareable],
props: {

10
packages/mixins/themeable.js
View File

@ -3,6 +3,10 @@ export default {
theme: {
type: String,
default: null
},
themedStyle: {
type: Object,
default: null
}
},
computed: {
@ -12,6 +16,12 @@ export default {
} else {
return (this.NApp && this.NApp.synthesizedTheme) || null
}
},
synthesizedStyle () {
if (this.themedStyle && this.synthesizedTheme && this.themedStyle[this.synthesizedTheme]) {
return this.themedStyle[this.synthesizedTheme]
}
return null
}
}
}

14
styles/Avatar.scss
View File

@ -11,6 +11,11 @@
@include e(text) {
line-height: 1.25;
}
@include b(icon) {
position: relative;
top: 4px;
font-size: $width - 8px;
}
}
}
@ -19,7 +24,13 @@
@include avatar-size-mixin('small');
@include avatar-size-mixin('medium');
@include avatar-size-mixin('large');
background-color: rgba(128, 128, 128, .5);
@include b(icon) {
transition: fill .3s $default-cubic-bezier;
fill: white;
}
color: white;
transition: background-color .3s $default-cubic-bezier, color .3s $default-cubic-bezier;
background-color: $--overlay-5;
font-size: 14px;
display: inline-block;
position: relative;
@ -31,7 +42,6 @@
height: 100%;
}
@include e(text) {
color: white;
white-space: nowrap;
display: inline-block;
position: absolute;

5
styles/Badge.scss
View File

@ -106,7 +106,7 @@
width: 8px;
padding: 0;
min-width: 8px;
left: calc(100% - 4px);
left: 100%;
bottom: calc(100% - 4px);
@include e(ripple-mask) {
border-radius: 4px;
@ -135,7 +135,8 @@
padding: 0 6px;
text-align: center;
font-size: 12px;
left: calc(100% - 9px);
transform: translateX(-50%);
left: 100%;
bottom: calc(100% - 9px);
font-weight: 700;
@include e(ripple-mask) {