mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-18 12:34:25 +08:00
chore
This commit is contained in:
parent
55aced4e0f
commit
6b20ad8325
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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...
|
@ -25,8 +25,4 @@ push-pull
|
||||
|pull|`number`|`0`||
|
||||
|
||||
## 备注
|
||||
栅格不是响应式的,因为不太有时间写,额...
|
||||
|
||||
但是,在一个几乎所有组件都是非响应式的库里面,栅格却是响应式的其实有那么点奇怪。把所有需要做响应式适配的工作都交给组件库不是很合理的事。
|
||||
|
||||
开发者常说,没有银弹。我对此认同,就我所知,目前还没什么东西能让人在不处理任何边界情况的状况下一次性写好复杂的用户界面。我并不总想着一定要一种完美的解决方案:如果**问题本身是复杂的**(在你仔细思考后得出了这个结论),那接受它(然后针对不同的状况开始写不同的解决方案)应该是一种说得过去的方法。
|
||||
栅格不是响应式的,因为不太有时间写,额...
|
@ -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: () => {
|
||||
|
@ -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%'
|
||||
|
@ -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: () => {
|
||||
|
@ -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%'
|
||||
|
Loading…
Reference in New Issue
Block a user