This commit is contained in:
07akioni 2020-08-02 00:35:14 +08:00
parent 55aced4e0f
commit 6b20ad8325
12 changed files with 26 additions and 34 deletions

View File

@ -3,10 +3,10 @@
Avatar can be circle shaped.
```html
<n-avatar circle size="small" src="https://naiveui.oss-cn-hongkong.aliyuncs.com/07akioni.jpeg"/>
<n-avatar circle size="medium" src="https://naiveui.oss-cn-hongkong.aliyuncs.com/07akioni.jpeg"/>
<n-avatar circle size="large" src="https://naiveui.oss-cn-hongkong.aliyuncs.com/07akioni.jpeg"/>
<n-avatar circle :size="48" src="https://naiveui.oss-cn-hongkong.aliyuncs.com/07akioni.jpeg"/>
<n-avatar circle size="small" src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"/>
<n-avatar circle size="medium" src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"/>
<n-avatar circle size="large" src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"/>
<n-avatar circle :size="48" src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"/>
```
```css

View File

@ -3,10 +3,10 @@
Avatar has `small`, `medium` and `large` size. You could alse custom size by a px number.
```html
<n-avatar size="small" src="https://naiveui.oss-cn-hongkong.aliyuncs.com/07akioni.jpeg"/>
<n-avatar size="medium" src="https://naiveui.oss-cn-hongkong.aliyuncs.com/07akioni.jpeg"/>
<n-avatar size="large" src="https://naiveui.oss-cn-hongkong.aliyuncs.com/07akioni.jpeg"/>
<n-avatar :size="48" src="https://naiveui.oss-cn-hongkong.aliyuncs.com/07akioni.jpeg"/>
<n-avatar size="small" src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"/>
<n-avatar size="medium" src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"/>
<n-avatar size="large" src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"/>
<n-avatar :size="48" src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"/>
```
```css

View File

@ -3,10 +3,10 @@
头像可以是圆形。
```html
<n-avatar circle size="small" src="https://naiveui.oss-cn-hongkong.aliyuncs.com/07akioni.jpeg"/>
<n-avatar circle size="medium" src="https://naiveui.oss-cn-hongkong.aliyuncs.com/07akioni.jpeg"/>
<n-avatar circle size="large" src="https://naiveui.oss-cn-hongkong.aliyuncs.com/07akioni.jpeg"/>
<n-avatar circle :size="48" src="https://naiveui.oss-cn-hongkong.aliyuncs.com/07akioni.jpeg"/>
<n-avatar circle size="small" src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"/>
<n-avatar circle size="medium" src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"/>
<n-avatar circle size="large" src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"/>
<n-avatar circle :size="48" src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"/>
```
```css

View File

@ -3,10 +3,10 @@
头像有 `small`、`medium` 和 `large` 大小,也可以自己设定尺寸。
```html
<n-avatar size="small" src="https://naiveui.oss-cn-hongkong.aliyuncs.com/07akioni.jpeg"/>
<n-avatar size="medium" src="https://naiveui.oss-cn-hongkong.aliyuncs.com/07akioni.jpeg"/>
<n-avatar size="large" src="https://naiveui.oss-cn-hongkong.aliyuncs.com/07akioni.jpeg"/>
<n-avatar :size="48" src="https://naiveui.oss-cn-hongkong.aliyuncs.com/07akioni.jpeg"/>
<n-avatar size="small" src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"/>
<n-avatar size="medium" src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"/>
<n-avatar size="large" src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"/>
<n-avatar :size="48" src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"/>
```
```css

View File

@ -3,7 +3,7 @@ Card can have a cover.
```html
<n-card title="Card with Cover">
<template v-slot:cover>
<img src="https://naiveui.oss-cn-hongkong.aliyuncs.com/07akioni.jpeg">
<img src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg">
</template>
Card Content
</n-card>

View File

@ -3,7 +3,7 @@
```html
<n-card title="带封面的卡片">
<template v-slot:cover>
<img src="https://naiveui.oss-cn-hongkong.aliyuncs.com/07akioni.jpeg">
<img src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg">
</template>
卡片内容
</n-card>

View File

@ -24,8 +24,4 @@ push-pull
|pull|`number`|`0`||
## Notes
The grid is not responsive, for I have not enough time, ha...
However, I think it is wired that when grid is responsive but nearly all other components are not responsive. It is not a good idea to put all responsibility to a ui-framework for building a responsive layout.
Developers always say that there's no silver bullet. I agree with it. So far as I know, nothing is able to make you write code once without handling any corner case of the whole compilicated user interface. I don't always try to find a perfect way to solve a problem: If you find **the thing itself is complicated** (after carefully thinking), accepting it (and start to solving it case by case) could be a viable way.
The grid is not responsive, for I have not enough time, ha...

View File

@ -25,8 +25,4 @@ push-pull
|pull|`number`|`0`||
## 备注
栅格不是响应式的,因为不太有时间写,额...
但是,在一个几乎所有组件都是非响应式的库里面,栅格却是响应式的其实有那么点奇怪。把所有需要做响应式适配的工作都交给组件库不是很合理的事。
开发者常说,没有银弹。我对此认同,就我所知,目前还没什么东西能让人在不处理任何边界情况的状况下一次性写好复杂的用户界面。我并不总想着一定要一种完美的解决方案:如果**问题本身是复杂的**(在你仔细思考后得出了这个结论),那接受它(然后针对不同的状况开始写不同的解决方案)应该是一种说得过去的方法。
栅格不是响应式的,因为不太有时间写,额...

View File

@ -30,7 +30,7 @@ Hold each other close the whole night through`,
props: {
size: 'small',
round: true,
src:'https://naiveui.oss-cn-hongkong.aliyuncs.com/07akioni.jpeg'
src:'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg'
}
}),
onAfterHide: () => {

View File

@ -36,7 +36,7 @@ Hold each other close the whole night through`,
props: {
size: 'small',
round: true,
src:'https://naiveui.oss-cn-hongkong.aliyuncs.com/07akioni.jpeg'
src:'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg'
}
}),
onClose: () => {
@ -48,7 +48,7 @@ Hold each other close the whole night through`,
if (this.notification) {
this.notification.content = h => h('img', {
attrs: {
src: 'https://naiveui.oss-cn-hongkong.aliyuncs.com/07akioni.jpeg'
src: 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg'
},
style: {
width: '100%'

View File

@ -30,7 +30,7 @@ Hold each other close the whole night through`,
props: {
size: 'small',
round: true,
src:'https://naiveui.oss-cn-hongkong.aliyuncs.com/07akioni.jpeg'
src:'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg'
}
}),
onAfterHide: () => {

View File

@ -36,7 +36,7 @@ Hold each other close the whole night through`,
props: {
size: 'small',
round: true,
src:'https://naiveui.oss-cn-hongkong.aliyuncs.com/07akioni.jpeg'
src:'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg'
}
}),
onClose: () => {
@ -48,7 +48,7 @@ Hold each other close the whole night through`,
if (this.notification) {
this.notification.content = h => h('img', {
attrs: {
src: 'https://naiveui.oss-cn-hongkong.aliyuncs.com/07akioni.jpeg'
src: 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg'
},
style: {
width: '100%'