mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-04-06 14:30:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: prettier markdown

Browse Source
This commit is contained in:
07akioni 2020-12-12 14:44:44 +08:00
parent 2d13c548b6
commit 50f48b22b4
869 changed files with 10267 additions and 9824 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
demo/Caveat.md
View File

@ -1,4 +1,5 @@
# Caveat
Code is messy here because I've no time to refactor it.
It works matter.
It works matter.

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

@ -1,25 +1,32 @@
# Basic
Affix has `offset-top`, `top`, `offset-bottom` and `bottom`. `offset-top` is top affixing trigger point. `top` is the style `top` value after top affixing is trigger. `offset-bottom` and `bottom` work in similar way.
```html
<div class="container">
<div class="padding"></div>
<div class="content">
<n-row>
<n-col :span="12">
<n-affix :top="120" :offset-top="60"><n-tag>Affix Trigger Top 60px</n-tag></n-affix>
<n-affix :top="120" :offset-top="60"
><n-tag>Affix Trigger Top 60px</n-tag></n-affix
>
</n-col>
<n-col :span="12">
<n-affix :bottom="120" :offset-bottom="60"><n-tag>Affix Trigger Bottom 60px</n-tag></n-affix>
<n-affix :bottom="120" :offset-bottom="60"
><n-tag>Affix Trigger Bottom 60px</n-tag></n-affix
>
</n-col>
</n-row>
</div>
</div>
```
```css
.container {
width: 100%;
height: 200px;
background-color: rgba(128, 128, 128, .3);
background-color: rgba(128, 128, 128, 0.3);
border-radius: 3px;
overflow: auto;
}
@ -27,10 +34,10 @@ Affix has `offset-top`, `top`, `offset-bottom` and `bottom`. `offset-top` is top
.padding {
height: 150px;
width: 100%;
background-color: rgba(128, 128, 128, .15);
background-color: rgba(128, 128, 128, 0.15);
}
.content {
height: 600px;
}
```
```

21
demo/documentation/components/affix/enUS/index.demo-entry.md
View File

@ -1,16 +1,21 @@
# Affix
Affix can make content stick to fixed places when scrolling. It's similar to `position: sticky` but can do more things.
## Demos
```demo
basic
position
```
## Props
|Name|Type|Default|Description|
|-|-|-|-|
|bottom|`number`|`undefined`|The css bottom property after trigger bottom affix. (if not set, use `offset-bottom` prop)|
|listen-to|`string \| HTMLElement`|`undefined`|The scrolling element to listen scrolling. If not set it will listen to the nearest scrollable ascendant element.|
|offset-bottom|`number`|`undefined`|The distance px to bottom of target to trigger bottom affix. (if not set, use `bottom` prop)|
|offset-top|`number`|`undefined`|The distance px to top of target to trigger top affix. (if not set, use `top` prop)|
|position|`'fixed' \| 'absolute'`|`'fixed'`||
|top|`number`|`undefined`|The css top property after trigger top affix. (if not set, use `offset-top` prop)|
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| bottom | `number` | `undefined` | The css bottom property after trigger bottom affix. (if not set, use `offset-bottom` prop) |
| listen-to | `string \| HTMLElement` | `undefined` | The scrolling element to listen scrolling. If not set it will listen to the nearest scrollable ascendant element. |
| offset-bottom | `number` | `undefined` | The distance px to bottom of target to trigger bottom affix. (if not set, use `bottom` prop) |
| offset-top | `number` | `undefined` | The distance px to top of target to trigger top affix. (if not set, use `top` prop) |
| position | `'fixed' \| 'absolute'` | `'fixed'` | |
| top | `number` | `undefined` | The css top property after trigger top affix. (if not set, use `offset-top` prop) |

17
demo/documentation/components/affix/enUS/position.demo.md
View File

@ -1,20 +1,27 @@
# Position
Affix can be `absolute` or `fixed` positioned. You may need some css tricks to make it works as following. By default position is set to `fixed`, because in most cases scrolled element is `#document`.
```html
<div class="absolute-anchor-container">
<div class="container">
<div class="padding"></div>
<div class="content">
<div style="display: inline-block; width: 50%;">
<n-affix :offset-top="50" position="absolute"><n-tag>Affix Trigger Top 50px</n-tag></n-affix>
<n-affix :offset-top="50" position="absolute"
><n-tag>Affix Trigger Top 50px</n-tag></n-affix
>
</div>
<div style="display: inline-block; width: 50%;">
<n-affix :offset-bottom="60" position="absolute"><n-tag>Affix Trigger Bottom 60px</n-tag></n-affix>
<n-affix :offset-bottom="60" position="absolute"
><n-tag>Affix Trigger Bottom 60px</n-tag></n-affix
>
</div>
</div>
</div>
</div>
```
```css
.absolute-anchor-container {
width: 100%;
@ -24,7 +31,7 @@ Affix can be `absolute` or `fixed` positioned. You may need some css tricks to m
.container {
height: 200px;
background-color: rgba(128, 128, 128, .3);
background-color: rgba(128, 128, 128, 0.3);
border-radius: 3px;
overflow: auto;
}
@ -32,10 +39,10 @@ Affix can be `absolute` or `fixed` positioned. You may need some css tricks to m
.padding {
height: 150px;
width: 100%;
background-color: rgba(128, 128, 128, .15);
background-color: rgba(128, 128, 128, 0.15);
}
.content {
height: 600px;
}
```
```

17
demo/documentation/components/affix/zhCN/basic.demo.md
View File

@ -1,25 +1,32 @@
# 基础用法
Affix 有 `offset-top`、`top`、`offset-bottom` 和 `bottom` 属性。`offset-top` 是顶部固定的触发距离，`top` 是在触发顶部固定之后 CSS 的 `top` 值。`offset-bottom` 和 `bottom` 类似。
```html
<div class="container">
<div class="padding"></div>
<div class="content">
<n-row>
<n-col :span="12">
<n-affix :top="120" :offset-top="60"><n-tag>顶部触发距离 60px</n-tag></n-affix>
<n-affix :top="120" :offset-top="60"
><n-tag>顶部触发距离 60px</n-tag></n-affix
>
</n-col>
<n-col :span="12">
<n-affix :bottom="120" :offset-bottom="60"><n-tag>底部触发距离 60px</n-tag></n-affix>
<n-affix :bottom="120" :offset-bottom="60"
><n-tag>底部触发距离 60px</n-tag></n-affix
>
</n-col>
</n-row>
</div>
</div>
```
```css
.container {
width: 100%;
height: 200px;
background-color: rgba(128, 128, 128, .3);
background-color: rgba(128, 128, 128, 0.3);
border-radius: 3px;
overflow: auto;
}
@ -27,10 +34,10 @@ Affix 有 `offset-top`、`top`、`offset-bottom` 和 `bottom` 属性。`offset-t
.padding {
height: 150px;
width: 100%;
background-color: rgba(128, 128, 128, .15);
background-color: rgba(128, 128, 128, 0.15);
}
.content {
height: 600px;
}
```
```

21
demo/documentation/components/affix/zhCN/index.demo-entry.md
View File

@ -1,16 +1,21 @@
# 固钉 Affix
Affix 可以让内容在页面滚动的时候固定在一个位置，它和 `position: sticky` 有那么点像不过可以做更多事。
## 演示
```demo
basic
position
```
## Props
|名称|类型|默认值|描述|
|-|-|-|-|
|bottom|`number`|`undefined`|在触发顶部固定后 Affix 的 CSS bottom 属性（如果没设定，会使用 `offset-bottom` 代替)|
|listen-to|`string \| HTMLElement`|`undefined`|需要监听滚动的元素，如果未设定则会监听最近的可滚动祖先元素|
|offset-bottom|`number`|`undefined`|触发底部固定时，Affix 和目标元素元素的底部距离（如果没设定，会使用 `bottom` 代替)|
|offset-top|`number`|`undefined`|触发顶部固定时，Affix 和目标元素元素的顶部距离（如果没设定，会使用 `top` 代替)|
|position|`'fixed' \| 'absolute'`|`'fixed'`||
|top|`number`|`undefined`|在触发顶部固定后 Affix 的 CSS top 属性（如果没设定，会使用 `offset-top` 代替)|
| 名称 | 类型 | 默认值 | 描述 |
| --- | --- | --- | --- |
| bottom | `number` | `undefined` | 在触发顶部固定后 Affix 的 CSS bottom 属性（如果没设定，会使用 `offset-bottom` 代替) |
| listen-to | `string \| HTMLElement` | `undefined` | 需要监听滚动的元素，如果未设定则会监听最近的可滚动祖先元素 |
| offset-bottom | `number` | `undefined` | 触发底部固定时，Affix 和目标元素元素的底部距离（如果没设定，会使用 `bottom` 代替) |
| offset-top | `number` | `undefined` | 触发顶部固定时，Affix 和目标元素元素的顶部距离（如果没设定，会使用 `top` 代替) |
| position | `'fixed' \| 'absolute'` | `'fixed'` | |
| top | `number` | `undefined` | 在触发顶部固定后 Affix 的 CSS top 属性（如果没设定，会使用 `offset-top` 代替) |

17
demo/documentation/components/affix/zhCN/position.demo.md
View File

@ -1,20 +1,27 @@
# 位置
Affix 可以 `absolute` 或者 `fixed` 定位。你可能还需要写一些额外的 CSS 才能让达到例子的效果。 默认情况下位置是 `fixed`，因为大多数情况下，滚动的元素是 `#document`。
```html
<div class="absolute-anchor-container">
<div class="container">
<div class="padding"></div>
<div class="content">
<div style="display: inline-block; width: 50%;">
<n-affix :offset-top="50" position="absolute"><n-tag>顶部触发距离 50px</n-tag></n-affix>
<n-affix :offset-top="50" position="absolute"
><n-tag>顶部触发距离 50px</n-tag></n-affix
>
</div>
<div style="display: inline-block; width: 50%;">
<n-affix :offset-bottom="60" position="absolute"><n-tag>底部触发距离 60px</n-tag></n-affix>
<n-affix :offset-bottom="60" position="absolute"
><n-tag>底部触发距离 60px</n-tag></n-affix
>
</div>
</div>
</div>
</div>
```
```css
.absolute-anchor-container {
width: 100%;
@ -24,7 +31,7 @@ Affix 可以 `absolute` 或者 `fixed` 定位。你可能还需要写一些额
.container {
height: 200px;
background-color: rgba(128, 128, 128, .3);
background-color: rgba(128, 128, 128, 0.3);
border-radius: 3px;
overflow: auto;
}
@ -32,10 +39,10 @@ Affix 可以 `absolute` 或者 `fixed` 定位。你可能还需要写一些额
.padding {
height: 150px;
width: 100%;
background-color: rgba(128, 128, 128, .15);
background-color: rgba(128, 128, 128, 0.15);
}
.content {
height: 600px;
}
```
```

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

@ -1,4 +1,5 @@
# Basic
```html
<n-alert title="Default Text" type="default">
<template v-slot:icon>
@ -8,23 +9,18 @@
</template>
Gee it's good to be back home
</n-alert>
<n-alert title="Info Text" type="info">
Gee it's good to be back home
</n-alert>
<n-alert title="Info Text" type="info"> Gee it's good to be back home </n-alert>
<n-alert title="Success Text" type="success">
Leave it till tomorrow to unpack my case
</n-alert>
<n-alert title="Warning Text" type="warning">
Honey disconnect the phone
</n-alert>
<n-alert title="Error Text" type="error">
I'm back in the U.S.S.R.
</n-alert>
<n-alert title="Error Text" type="error"> I'm back in the U.S.S.R. </n-alert>
```
```js
import {
IosAirplane,
} from '@vicons/ionicons-v4'
import { IosAirplane } from '@vicons/ionicons-v4'
export default {
components: {
@ -32,8 +28,9 @@ export default {
}
}
```
```css
.n-alert {
margin-bottom: 12px;
}
```
```

11
demo/documentation/components/alert/enUS/closable.demo.md
View File

@ -1,4 +1,5 @@
# Closable
```html
<n-alert title="Default Text" type="default" closable>
<template v-slot:icon>
@ -21,24 +22,24 @@
I'm back in the U.S.S.R.
</n-alert>
```
```js
import {
IosAirplane,
} from '@vicons/ionicons-v4'
import { IosAirplane } from '@vicons/ionicons-v4'
export default {
components: {
IosAirplane
},
data () {
data() {
return {
show: true
}
}
}
```
```css
.n-alert {
margin-bottom: 12px;
}
```
```

8
demo/documentation/components/alert/enUS/icon.demo.md
View File

@ -1,4 +1,5 @@
# Icon
```html
<n-alert title="Back in the U.S.S.R.">
<template v-slot:icon>
@ -13,14 +14,13 @@
Aw come on!
</n-alert>
```
```js
import {
IosAirplane,
} from '@vicons/ionicons-v4'
import { IosAirplane } from '@vicons/ionicons-v4'
export default {
components: {
IosAirplane
}
}
```
```

34
demo/documentation/components/alert/enUS/index.demo-entry.md
View File

@ -1,7 +1,9 @@
# Alert
According to my experience, the most frequent usage of it may be requesting for disabling AdBlocks.
## Demos
```demo
basic
closable
@ -10,20 +12,22 @@ no-icon
```
## Props
|Name|Type|Default|Description|
|-|-|-|-|
|closable|`boolean`|`false`||
|show-icon|`boolean`|`true`||
|themed-style|`{ [themeName: string]: Object }`|`undefined`||
|theme|`'light' \| 'dark' \| string`|`undefined`||
|title|`string`|`undefined`||
|type|`'default' \| 'info' \| 'success' \| 'warning' \| 'error'`|`'default'`||
|on-after-leave|`Function`|`undefined`||
|on-close|`() => boolean \| Promise<boolean> \| any`|`() => true`||
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| closable | `boolean` | `false` | |
| show-icon | `boolean` | `true` | |
| themed-style | `{ [themeName: string]: Object }` | `undefined` | |
| theme | `'light' \| 'dark' \| string` | `undefined` | |
| title | `string` | `undefined` | |
| type | `'default' \| 'info' \| 'success' \| 'warning' \| 'error'` | `'default'` | |
| on-after-leave | `Function` | `undefined` | |
| on-close | `() => boolean \| Promise<boolean> \| any` | `() => true` | |
## Slots
|Name|Parameters|Description|
|-|-|-|
|default|`()`||
|header|`()`||
|icon|`()`||
| Name | Parameters | Description |
| ------- | ---------- | ----------- |
| default | `()` | |
| header | `()` | |
| icon | `()` | |

3
demo/documentation/components/alert/enUS/no-icon.demo.md
View File

@ -1,7 +1,8 @@
# No Icon
```html
<n-alert :show-icon="false">
Yeah I'm back in the U.S.S.R.<br />
You don't know how lucky you are boys
</n-alert>
```
```

17
demo/documentation/components/alert/zhCN/basic.demo.md
View File

@ -1,4 +1,5 @@
# 基础用法
```html
<n-alert title="Default 类型" type="default">
<template v-slot:icon>
@ -8,23 +9,18 @@
</template>
Gee it's good to be back home
</n-alert>
<n-alert title="Info 类型" type="info">
Gee it's good to be back home
</n-alert>
<n-alert title="Info 类型" type="info"> Gee it's good to be back home </n-alert>
<n-alert title="Success 类型" type="success">
Leave it till tomorrow to unpack my case
</n-alert>
<n-alert title="Warning 类型" type="warning">
Honey disconnect the phone
</n-alert>
<n-alert title="Error 类型" type="error">
I'm back in the U.S.S.R.
</n-alert>
<n-alert title="Error 类型" type="error"> I'm back in the U.S.S.R. </n-alert>
```
```js
import {
IosAirplane,
} from '@vicons/ionicons-v4'
import { IosAirplane } from '@vicons/ionicons-v4'
export default {
components: {
@ -32,8 +28,9 @@ export default {
}
}
```
```css
.n-alert {
margin-bottom: 12px;
}
```
```

11
demo/documentation/components/alert/zhCN/closable.demo.md
View File

@ -1,4 +1,5 @@
# 可以关掉
```html
<n-alert title="Default 类型" type="default" closable>
<template v-slot:icon>
@ -21,24 +22,24 @@
I'm back in the U.S.S.R.
</n-alert>
```
```js
import {
IosAirplane,
} from '@vicons/ionicons-v4'
import { IosAirplane } from '@vicons/ionicons-v4'
export default {
components: {
IosAirplane
},
data () {
data() {
return {
show: true
}
}
}
```
```css
.n-alert {
margin-bottom: 12px;
}
```
```

8
demo/documentation/components/alert/zhCN/icon.demo.md
View File

@ -1,4 +1,5 @@
# 图标
```html
<n-alert title="Back in the U.S.S.R.">
<template v-slot:icon>
@ -13,14 +14,13 @@
Aw come on!
</n-alert>
```
```js
import {
IosAirplane,
} from '@vicons/ionicons-v4'
import { IosAirplane } from '@vicons/ionicons-v4'
export default {
components: {
IosAirplane
}
}
```
```

35
demo/documentation/components/alert/zhCN/index.demo-entry.md
View File

@ -1,8 +1,11 @@
# 警示信息 Alert
根据我的经验，这东西使用最频繁的场景是让你关掉 AdBlocks。
<!-- there is a bug of chrome rendering svg, if translateZ is not set -->
## 演示
```demo
basic
closable
@ -11,20 +14,22 @@ no-icon
```
## Props
|名称|类型|默认值|说明|
|-|-|-|-|
|closable|`boolean`|`false`||
|show-icon|`boolean`|`true`||
|theme|`'light' \| 'dark' \| string`|`undefined`||
|themed-style|`{ [themeName: string]: Object }`|`undefined`||
|title|`string`|`undefined`||
|type|`'default' \| 'info' \| 'success' \| 'warning' \| 'error'`|`'default'`||
|on-after-leave|`Function`|`undefined`||
|on-close|`() => boolean \| Promise<boolean> \| any`|`() => true`||
| 名称 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| closable | `boolean` | `false` | |
| show-icon | `boolean` | `true` | |
| theme | `'light' \| 'dark' \| string` | `undefined` | |
| themed-style | `{ [themeName: string]: Object }` | `undefined` | |
| title | `string` | `undefined` | |
| type | `'default' \| 'info' \| 'success' \| 'warning' \| 'error'` | `'default'` | |
| on-after-leave | `Function` | `undefined` | |
| on-close | `() => boolean \| Promise<boolean> \| any` | `() => true` | |
## Slots
|名称|参数|说明|
|-|-|-|
|default|`()`||
|header|`()`||
|icon|`()`||
| 名称 | 参数 | 说明 |
| ------- | ---- | ---- |
| default | `()` | |
| header | `()` | |
| icon | `()` | |

3
demo/documentation/components/alert/zhCN/no-icon.demo.md
View File

@ -1,7 +1,8 @@
# 没有图标
```html
<n-alert :show-icon="false">
Yeah I'm back in the U.S.S.R.<br />
You don't know how lucky you are boys
</n-alert>
```
```

12
demo/documentation/components/anchor/enUS/affix.demo.md
View File

@ -1,15 +1,17 @@
# Affix
When in affix mode, Anchor can recieve addition props as same as Affix.
```html
<div style="height: 200px;">
<n-anchor affix :offset-top="24" :top="88" style="z-index: 1;" :bound="24">
<n-anchor-link title="Demos" href="#Demos">
<n-anchor-link title="Basic" href="#basic"/>
<n-anchor-link title="Ignore-Gap" href="#ignore-gap"/>
<n-anchor-link title="Affix" href="#affix"/>
<n-anchor-link title="Scroll To" href="#scrollto"/>
<n-anchor-link title="Basic" href="#basic" />
<n-anchor-link title="Ignore-Gap" href="#ignore-gap" />
<n-anchor-link title="Affix" href="#affix" />
<n-anchor-link title="Scroll To" href="#scrollto" />
</n-anchor-link>
<n-anchor-link title="Props" href="#Props" />
</n-anchor>
</div>
```
```

11
demo/documentation/components/anchor/enUS/basic.demo.md
View File

@ -1,14 +1,15 @@
# Basic
```html
<div>
<n-anchor>
<n-anchor-link title="Demos" href="#Demos">
<n-anchor-link title="Basic" href="#basic"/>
<n-anchor-link title="Ignore-Gap" href="#ignore-gap"/>
<n-anchor-link title="Affix" href="#affix"/>
<n-anchor-link title="Scroll To" href="#scrollto"/>
<n-anchor-link title="Basic" href="#basic" />
<n-anchor-link title="Ignore-Gap" href="#ignore-gap" />
<n-anchor-link title="Affix" href="#affix" />
<n-anchor-link title="Scroll To" href="#scrollto" />
</n-anchor-link>
<n-anchor-link title="Props" href="#Props" />
</n-anchor>
</div>
```
```

25
demo/documentation/components/anchor/enUS/ignore-gap.demo.md
View File

@ -1,4 +1,5 @@
# Ignore Gap
```html
<div style="height:200px">
<n-row :gutter="12">
@ -10,11 +11,17 @@
</n-col>
<n-col :span="6">
<div style="width:160px">
<n-anchor affix :offset-top="24" :top="88" style="z-index: 1;" ignore-gap>
<n-anchor
affix
:offset-top="24"
:top="88"
style="z-index: 1;"
ignore-gap
>
<n-anchor-link title="Demos" href="#Demos">
<n-anchor-link title="Ignore-Gap" href="#ignore-gap"/>
<n-anchor-link title="Affix" href="#affix"/>
<n-anchor-link title="Scroll To" href="#scrollto"/>
<n-anchor-link title="Ignore-Gap" href="#ignore-gap" />
<n-anchor-link title="Affix" href="#affix" />
<n-anchor-link title="Scroll To" href="#scrollto" />
</n-anchor-link>
<n-anchor-link title="Props" href="#Props" />
</n-anchor>
@ -22,11 +29,11 @@
</n-col>
<n-col :span="6">
<div style="width:160px">
<n-anchor affix :offset-top="24" :top="88" style="z-index: 1;">
<n-anchor affix :offset-top="24" :top="88" style="z-index: 1;">
<n-anchor-link title="Demos" href="#Demos">
<n-anchor-link title="Ignore-Gap" href="#ignore-gap"/>
<n-anchor-link title="Affix" href="#affix"/>
<n-anchor-link title="Scroll To" href="#scrollto"/>
<n-anchor-link title="Ignore-Gap" href="#ignore-gap" />
<n-anchor-link title="Affix" href="#affix" />
<n-anchor-link title="Scroll To" href="#scrollto" />
</n-anchor-link>
<n-anchor-link title="Props" href="#Props" />
</n-anchor>
@ -34,4 +41,4 @@
</n-col>
</n-row>
</div>
```
```

29
demo/documentation/components/anchor/enUS/index.demo-entry.md
View File

@ -1,7 +1,11 @@
# Anchor
<!--single-column-->
These demos used to use some charactor names from *Hard-Boiled Wonderland and the End of the World* as anchor links, but if so there will be too wired in this page compared with other pages. So I rewrite them. What a pity.
These demos used to use some charactor names from _Hard-Boiled Wonderland and the End of the World_ as anchor links, but if so there will be too wired in this page compared with other pages. So I rewrite them. What a pity.
## Demos
```demo
basic
ignore-gap
@ -9,16 +13,19 @@ affix
scrollto
```
## Props
|Name|Type|Default|Description|
|-|-|-|-|
|affix|`boolean`|`false`|If it works like a affix. If set to `true`, it will recieve props from [affix](n-affix#Props)|
|bound|`number`|`12`||
|ignore-gap|`boolean`|`false`| If set to `true`, it will be displayed on the exact href |
|listen-to|`string \| HTMLElement`|`undefined`|The scrolling element to listen scrolling. If not set it will listen to the nearest scrollable ascendant element.|
|theme|`'light' \| 'dark' \| string`|`undefined`||
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| affix | `boolean` | `false` | If it works like a affix. If set to `true`, it will recieve props from [affix](n-affix#Props) |
| bound | `number` | `12` | |
| ignore-gap | `boolean` | `false` | If set to `true`, it will be displayed on the exact href |
| listen-to | `string \| HTMLElement` | `undefined` | The scrolling element to listen scrolling. If not set it will listen to the nearest scrollable ascendant element. |
| theme | `'light' \| 'dark' \| string` | `undefined` | |
## Methods
|Name|Type|Description|
|-|-|-|
|scrollTo|`(href: string) => void`||
| Name | Type | Description |
| -------- | ------------------------ | ----------- |
| scrollTo | `(href: string) => void` | |

22
demo/documentation/components/anchor/enUS/scrollto.demo.md
View File

@ -1,12 +1,20 @@
# Scroll To
```html
<div style="height: 200px; padding-left: 200px;">
<n-anchor affix :offset-top="24" :top="88" :bound="24" style="z-index: 1;" ref="anchor">
<n-anchor
affix
:offset-top="24"
:top="88"
:bound="24"
style="z-index: 1;"
ref="anchor"
>
<n-anchor-link title="Demos" href="#Demos">
<n-anchor-link title="Basic" href="#basic"/>
<n-anchor-link title="Ignore-Gap" href="#ignore-gap"/>
<n-anchor-link title="Affix" href="#affix"/>
<n-anchor-link title="Scroll To" href="#scrollto"/>
<n-anchor-link title="Basic" href="#basic" />
<n-anchor-link title="Ignore-Gap" href="#ignore-gap" />
<n-anchor-link title="Affix" href="#affix" />
<n-anchor-link title="Scroll To" href="#scrollto" />
</n-anchor-link>
<n-anchor-link title="Props" href="#Props" />
</n-anchor>
@ -16,15 +24,17 @@
<n-button @click="scrollTo('#affix')">Affix</n-button>
</div>
```
```js
export default {
methods: {
scrollTo (href) {
scrollTo(href) {
this.$refs.anchor.scrollTo(href)
}
}
}
```
```css
.n-button {
margin: 0 8px 12px 0;

12
demo/documentation/components/anchor/zhCN/affix.demo.md
View File

@ -1,15 +1,17 @@
# 固定
在固定模式下，Anchor 还接受和 Affix 一样的 Props。
```html
<div style="height: 200px;">
<n-anchor affix :offset-top="24" :top="88" style="z-index: 1;" :bound="24">
<n-anchor-link title="演示" href="#演示">
<n-anchor-link title="基础用法" href="#basic"/>
<n-anchor-link title="忽略间隔" href="#ignore-gap"/>
<n-anchor-link title="固定" href="#affix"/>
<n-anchor-link title="滚动到" href="#scrollto"/>
<n-anchor-link title="基础用法" href="#basic" />
<n-anchor-link title="忽略间隔" href="#ignore-gap" />
<n-anchor-link title="固定" href="#affix" />
<n-anchor-link title="滚动到" href="#scrollto" />
</n-anchor-link>
<n-anchor-link title="Props" href="#Props" />
</n-anchor>
</div>
```
```

11
demo/documentation/components/anchor/zhCN/basic.demo.md
View File

@ -1,14 +1,15 @@
# 基础用法
```html
<div>
<n-anchor>
<n-anchor-link title="演示" href="#演示">
<n-anchor-link title="基础用法" href="#basic"/>
<n-anchor-link title="忽略间隔" href="#ignore-gap"/>
<n-anchor-link title="固定" href="#affix"/>
<n-anchor-link title="滚动到" href="#scrollto"/>
<n-anchor-link title="基础用法" href="#basic" />
<n-anchor-link title="忽略间隔" href="#ignore-gap" />
<n-anchor-link title="固定" href="#affix" />
<n-anchor-link title="滚动到" href="#scrollto" />
</n-anchor-link>
<n-anchor-link title="Props" href="#Props" />
</n-anchor>
</div>
```
```

27
demo/documentation/components/anchor/zhCN/ignore-gap.demo.md
View File

@ -1,4 +1,5 @@
# 忽略间隔
```html
<div style="height:200px">
<n-row :gutter="12">
@ -10,11 +11,17 @@
</n-col>
<n-col :span="6">
<div style="width:160px;float:right;">
<n-anchor affix :offset-top="24" :top="88" style="z-index: 1;" ignore-gap>
<n-anchor
affix
:offset-top="24"
:top="88"
style="z-index: 1;"
ignore-gap
>
<n-anchor-link title="演示" href="#演示">
<n-anchor-link title="忽略间隔" href="#ignore-gap"/>
<n-anchor-link title="固定" href="#affix"/>
<n-anchor-link title="滚动到" href="#scrollto"/>
<n-anchor-link title="忽略间隔" href="#ignore-gap" />
<n-anchor-link title="固定" href="#affix" />
<n-anchor-link title="滚动到" href="#scrollto" />
</n-anchor-link>
<n-anchor-link title="Props" href="#Props" />
</n-anchor>
@ -22,11 +29,11 @@
</n-col>
<n-col :span="6">
<div style="width:160px;float:right;">
<n-anchor affix :offset-top="24" :top="88" style="z-index: 1;">
<n-anchor-link title="演示" href="#演示">
<n-anchor-link title="忽略间隔" href="#ignore-gap"/>
<n-anchor-link title="固定" href="#affix"/>
<n-anchor-link title="滚动到" href="#scrollto"/>
<n-anchor affix :offset-top="24" :top="88" style="z-index: 1;">
<n-anchor-link title="演示" href="#演示">
<n-anchor-link title="忽略间隔" href="#ignore-gap" />
<n-anchor-link title="固定" href="#affix" />
<n-anchor-link title="滚动到" href="#scrollto" />
</n-anchor-link>
<n-anchor-link title="Props" href="#Props" />
</n-anchor>
@ -34,4 +41,4 @@
</n-col>
</n-row>
</div>
```
```

27
demo/documentation/components/anchor/zhCN/index.demo-entry.md
View File

@ -1,23 +1,30 @@
# 侧边导航 Anchor
<!--single-column-->
下面的演示曾经用的是《世界尽头与冷酷仙境》的一些角色名称作为 Anchor 的子标题，但是这样的话和其他页面差的就有点远了。所以最后还是重写了这个页面，表示遗憾。
## 演示
```demo
basic
ignore-gap
affix
scrollto
```
## Props
|名称|类型|默认值|说明|
|-|-|-|-|
|affix|`boolean`|`false`|Anchor 是否像 Affix 一样展示，如果设定为 `true`，它还会接受 [Affix](n-affix#Props) 的 Props|
|bound|`number`|`12`||
|ignore-gap|`boolean`|`false`| 如果设定为 `true`, 导航将显示在准确的href区域 |
|listen-to|`string \| HTMLElement`|`undefined`|需要监听滚动的元素，如果未设定则会监听最近的可滚动祖先元素|
|theme|`'light' \| 'dark' \| string`|`undefined`||
| 名称 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| affix | `boolean` | `false` | Anchor 是否像 Affix 一样展示，如果设定为 `true`，它还会接受 [Affix](n-affix#Props) 的 Props |
| bound | `number` | `12` | |
| ignore-gap | `boolean` | `false` | 如果设定为 `true`, 导航将显示在准确的 href 区域 |
| listen-to | `string \| HTMLElement` | `undefined` | 需要监听滚动的元素，如果未设定则会监听最近的可滚动祖先元素 |
| theme | `'light' \| 'dark' \| string` | `undefined` | |
## Methods
|名称|类型|说明|
|-|-|-|
|scrollTo|`(href: string) => void`||
| 名称 | 类型 | 说明 |
| -------- | ------------------------ | ---- |
| scrollTo | `(href: string) => void` | |

22
demo/documentation/components/anchor/zhCN/scrollto.demo.md
View File

@ -1,12 +1,20 @@
# 滚动到
```html
<div style="height: 200px; padding-left: 200px;">
<n-anchor affix :offset-top="24" :top="88" :bound="24" style="z-index: 1;" ref="anchor">
<n-anchor
affix
:offset-top="24"
:top="88"
:bound="24"
style="z-index: 1;"
ref="anchor"
>
<n-anchor-link title="演示" href="#演示">
<n-anchor-link title="基础用法" href="#basic"/>
<n-anchor-link title="忽略间隔" href="#ignore-gap"/>
<n-anchor-link title="固定" href="#affix"/>
<n-anchor-link title="滚动到" href="#scrollto"/>
<n-anchor-link title="基础用法" href="#basic" />
<n-anchor-link title="忽略间隔" href="#ignore-gap" />
<n-anchor-link title="固定" href="#affix" />
<n-anchor-link title="滚动到" href="#scrollto" />
</n-anchor-link>
<n-anchor-link title="Props" href="#Props" />
</n-anchor>
@ -16,15 +24,17 @@
<n-button @click="scrollTo('#affix')">固定</n-button>
</div>
```
```js
export default {
methods: {
scrollTo (href) {
scrollTo(href) {
this.$refs.anchor.scrollTo(href)
}
}
}
```
```css
.n-button {
margin: 0 8px 12px 0;

15
demo/documentation/components/auto-complete/enUS/after-select.demo.md
View File

@ -1,5 +1,7 @@
# Actions After Select
Blur after selection or clear after selection.
```html
<n-space vertical>
<n-auto-complete
@ -16,25 +18,22 @@ Blur after selection or clear after selection.
/>
</n-space>
```
```js
export default {
computed: {
options () {
return [
'@gmail.com',
'@163.com',
'@qq.com'
].map(suffix => {
options() {
return ['@gmail.com', '@163.com', '@qq.com'].map((suffix) => {
const value = this.value === null ? '' : this.value
const prefix = value.split('@')[0]
return {
label: prefix + suffix,
value: prefix + suffix,
value: prefix + suffix
}
})
}
},
data () {
data() {
return {
value: null
}

16
demo/documentation/components/auto-complete/enUS/basic.demo.md
View File

@ -1,28 +1,26 @@
# Basic
```html
<n-auto-complete :options="options" v-model:value="value" placeholder="Email" />
```
```js
export default {
computed: {
options () {
return [
'@gmail.com',
'@163.com',
'@qq.com'
].map(suffix => {
options() {
return ['@gmail.com', '@163.com', '@qq.com'].map((suffix) => {
const prefix = this.value.split('@')[0]
return {
label: prefix + suffix,
value: prefix + suffix,
value: prefix + suffix
}
})
}
},
data () {
data() {
return {
value: ''
}
}
}
```
```

17
demo/documentation/components/auto-complete/enUS/custom-input.demo.md
View File

@ -1,5 +1,7 @@
# Custom Input Element
You can replace auto-complete's input element.
```html
<n-auto-complete :options="options" v-model:value="value">
<template v-slot="{ handleInput, handleBlur, handleFocus, value }">
@ -14,27 +16,24 @@ You can replace auto-complete's input element.
</template>
</n-auto-complete>
```
```js
export default {
computed: {
options () {
return [
'@gmail.com',
'@163.com',
'@qq.com'
].map(suffix => {
options() {
return ['@gmail.com', '@163.com', '@qq.com'].map((suffix) => {
const prefix = this.value.split('@')[0]
return {
label: prefix + suffix,
value: prefix + suffix,
value: prefix + suffix
}
})
}
},
data () {
data() {
return {
value: ''
}
}
}
```
```

12
demo/documentation/components/auto-complete/enUS/group.demo.md
View File

@ -1,27 +1,27 @@
# Group
```html
<n-auto-complete :options="options" v-model:value="value" placeholder="Email" />
```
```js
export default {
computed: {
options () {
options() {
return [
['Google', '@gmail.com'],
['Netease', '@163.com'],
['Tencent', '@qq.com']
].map(emailInfo => {
].map((emailInfo) => {
return {
type: 'group',
name: emailInfo[0],
children: [
this.value.split('@')[0] + emailInfo[1]
]
children: [this.value.split('@')[0] + emailInfo[1]]
}
})
}
},
data () {
data() {
return {
value: ''
}

67
demo/documentation/components/auto-complete/enUS/index.demo-entry.md
View File

@ -1,6 +1,9 @@
# Auto Complete
Use as search hint or something similar.
## Demos
```demo
basic
size
@ -10,39 +13,43 @@ after-select
```
## Props
|Name|Type|Default|Description|
|-|-|-|-|
|blur-after-select|`boolean`|`false`||
|clear-after-select|`boolean`|`false`||
|clearable|`boolean`|`false`||
|default-value|`string`|`null`||
|disabled|`boolean`|`false`||
|options|`Array<string \| AutoCompleteOption \| AutoCompleteOptionGroup>`|`[]`||
|placeholder|`string`|`'Please Input'`||
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
|theme|`'light' \| 'dark' \| string`|`undefined`||
|value|`string`|`undefined`||
|on-blur|`(event: FocusEvent) => any`|`undefined`||
|on-focus|`(event: FocusEvent) => any`|`undefined`||
|on-select|`(value: string) => any`|`undefined`||
|on-update:value|`(value: string \| null) => any`|`undefined`||
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| blur-after-select | `boolean` | `false` | |
| clear-after-select | `boolean` | `false` | |
| clearable | `boolean` | `false` | |
| default-value | `string` | `null` | |
| disabled | `boolean` | `false` | |
| options | `Array<string \| AutoCompleteOption \| AutoCompleteOptionGroup>` | `[]` | |
| placeholder | `string` | `'Please Input'` | |
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | |
| theme | `'light' \| 'dark' \| string` | `undefined` | |
| value | `string` | `undefined` | |
| on-blur | `(event: FocusEvent) => any` | `undefined` | |
| on-focus | `(event: FocusEvent) => any` | `undefined` | |
| on-select | `(value: string) => any` | `undefined` | |
| on-update:value | `(value: string \| null) => any` | `undefined` | |
### AutoCompleteOption Properties
|Name|Type|Description|
|-|-|-|
|disabled|`boolean`||
|label|`string`||
|render|`Function`||
|value|`string \| number`|Should be unique in options.|
| Name | Type | Description |
| -------- | ------------------ | ---------------------------- |
| disabled | `boolean` | |
| label | `string` | |
| render | `Function` | |
| value | `string \| number` | Should be unique in options. |
### AutoCompleteOptionGroup Properties
|Name|Type|Description|
|-|-|-|
|children|`Array<string | AutoCompleteOption>`||
|name|`string`||
|type|`'group'`||
| Name | Type | Description |
| -------- | ------------- | -------------------- | --- |
| children | `Array<string | AutoCompleteOption>` | |
| name | `string` | |
| type | `'group'` | |
## Slots
|Name|Parameters|Description|
|-|-|-|
|default|`(options: { handleInput: (value: string) => any, handleFocus: function, handleBlur: function, value: string, theme: string \| null })`||
| Name | Parameters | Description |
| --- | --- | --- |
| default | `(options: { handleInput: (value: string) => any, handleFocus: function, handleBlur: function, value: string, theme: string \| null })` | |

35
demo/documentation/components/auto-complete/enUS/size.demo.md
View File

@ -1,29 +1,42 @@
# Size
```html
<n-space vertical>
<n-auto-complete :options="options" v-model:value="value" placeholder="Email" size="small" />
<n-auto-complete :options="options" v-model:value="value" placeholder="Email" size="medium" />
<n-auto-complete :options="options" v-model:value="value" placeholder="Email" size="large" />
<n-auto-complete
:options="options"
v-model:value="value"
placeholder="Email"
size="small"
/>
<n-auto-complete
:options="options"
v-model:value="value"
placeholder="Email"
size="medium"
/>
<n-auto-complete
:options="options"
v-model:value="value"
placeholder="Email"
size="large"
/>
</n-space>
```
```js
export default {
computed: {
options () {
return [
'@gmail.com',
'@163.com',
'@qq.com'
].map(suffix => {
options() {
return ['@gmail.com', '@163.com', '@qq.com'].map((suffix) => {
const prefix = this.value.split('@')[0]
return {
label: prefix + suffix,
value: prefix + suffix,
value: prefix + suffix
}
})
}
},
data () {
data() {
return {
value: ''
}

15
demo/documentation/components/auto-complete/zhCN/after-select.demo.md
View File

@ -1,5 +1,7 @@
# 选择后的动作
在选中选项后清除内容或者选择后 Blur。
```html
<n-space vertical>
<n-auto-complete
@ -16,25 +18,22 @@
/>
</n-space>
```
```js
export default {
computed: {
options () {
return [
'@gmail.com',
'@163.com',
'@qq.com'
].map(suffix => {
options() {
return ['@gmail.com', '@163.com', '@qq.com'].map((suffix) => {
const value = this.value === null ? '' : this.value
const prefix = value.split('@')[0]
return {
label: prefix + suffix,
value: prefix + suffix,
value: prefix + suffix
}
})
}
},
data () {
data() {
return {
value: null
}

14
demo/documentation/components/auto-complete/zhCN/basic.demo.md
View File

@ -1,25 +1,23 @@
# 基础用法
```html
<n-auto-complete :options="options" v-model:value="value" placeholder="邮箱" />
```
```js
export default {
computed: {
options () {
return [
'@gmail.com',
'@163.com',
'@qq.com'
].map(suffix => {
options() {
return ['@gmail.com', '@163.com', '@qq.com'].map((suffix) => {
const prefix = this.value.split('@')[0]
return {
label: prefix + suffix,
value: prefix + suffix,
value: prefix + suffix
}
})
}
},
data () {
data() {
return {
value: ''
}

20
demo/documentation/components/auto-complete/zhCN/custom-input.demo.md
View File

@ -1,10 +1,9 @@
# 自定义输入元素
你可以替换 AutoComplete 的输入元素。
```html
<n-auto-complete
:options="options"
v-model:value="value"
>
<n-auto-complete :options="options" v-model:value="value">
<template v-slot="{ handleInput, handleBlur, handleFocus, value }">
<n-input
type="textarea"
@ -17,24 +16,21 @@
</template>
</n-auto-complete>
```
```js
export default {
computed: {
options () {
return [
'@gmail.com',
'@163.com',
'@qq.com'
].map(suffix => {
options() {
return ['@gmail.com', '@163.com', '@qq.com'].map((suffix) => {
const prefix = this.value.split('@')[0]
return {
label: prefix + suffix,
value: prefix + suffix,
value: prefix + suffix
}
})
}
},
data () {
data() {
return {
value: ''
}

12
demo/documentation/components/auto-complete/zhCN/group.demo.md
View File

@ -1,27 +1,27 @@
# 成组
```html
<n-auto-complete :options="options" v-model:value="value" placeholder="邮箱" />
```
```js
export default {
computed: {
options () {
options() {
return [
['谷歌', '@gmail.com'],
['网易', '@163.com'],
['腾讯', '@qq.com']
].map(emailInfo => {
].map((emailInfo) => {
return {
type: 'group',
name: emailInfo[0],
children: [
this.value.split('@')[0] + emailInfo[1]
]
children: [this.value.split('@')[0] + emailInfo[1]]
}
})
}
},
data () {
data() {
return {
value: ''
}

67
demo/documentation/components/auto-complete/zhCN/index.demo-entry.md
View File

@ -1,6 +1,9 @@
# 自动填充 Auto Complete
用来当搜索提示或者类似的东西。
## 演示
```demo
basic
size
@ -10,39 +13,43 @@ after-select
```
## Props
|名称|类型|默认值|说明|
|-|-|-|-|
|blur-after-select|`boolean`|`false`||
|clear-after-select|`boolean`|`false`||
|clearable|`boolean`|`false`||
|default-value|`string`|`null`||
|disabled|`boolean`|`false`||
|options|`Array<string \| AutoCompleteOption \| AutoCompleteOptionGroup>`|`[]`||
|placeholder|`string`|`'请输入'`||
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
|theme|`'light' \| 'dark' \| string`|`undefined`||
|value|`string`|`undefined`||
|on-blur|`(event: FocusEvent) => any`|`undefined`||
|on-focus|`(event: FocusEvent) => any`|`undefined`||
|on-select|`(value: string) => any`|`undefined`||
|on-update:value|`(value: string \| null) => any`|`undefined`||
| 名称 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| blur-after-select | `boolean` | `false` | |
| clear-after-select | `boolean` | `false` | |
| clearable | `boolean` | `false` | |
| default-value | `string` | `null` | |
| disabled | `boolean` | `false` | |
| options | `Array<string \| AutoCompleteOption \| AutoCompleteOptionGroup>` | `[]` | |
| placeholder | `string` | `'请输入'` | |
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | |
| theme | `'light' \| 'dark' \| string` | `undefined` | |
| value | `string` | `undefined` | |
| on-blur | `(event: FocusEvent) => any` | `undefined` | |
| on-focus | `(event: FocusEvent) => any` | `undefined` | |
| on-select | `(value: string) => any` | `undefined` | |
| on-update:value | `(value: string \| null) => any` | `undefined` | |
### AutoCompleteOption Properties
|名称|类型|介绍|
|-|-|-|
|disabled|`boolean`||
|label|`string`||
|render|`Function`||
|value|`string \| number`|需要唯一|
| 名称 | 类型 | 介绍 |
| -------- | ------------------ | -------- |
| disabled | `boolean` | |
| label | `string` | |
| render | `Function` | |
| value | `string \| number` | 需要唯一 |
### AutoCompleteOptionGroup Properties
|名称|类型|介绍|
|-|-|-|
|children|`Array<string \| AutoCompleteOption>`||
|name|`string`||
|type|`'group'`||
| 名称 | 类型 | 介绍 |
| -------- | ------------------------------------- | ---- |
| children | `Array<string \| AutoCompleteOption>` | |
| name | `string` | |
| type | `'group'` | |
## Slots
|名称|参数|说明|
|-|-|-|
|default|`(options: { handleInput: (value: string) => any, handleFocus: function, handleBlur: function, value: string, theme: string \| null })`||
| 名称 | 参数 | 说明 |
| --- | --- | --- |
| default | `(options: { handleInput: (value: string) => any, handleFocus: function, handleBlur: function, value: string, theme: string \| null })` | |

35
demo/documentation/components/auto-complete/zhCN/size.demo.md
View File

@ -1,29 +1,42 @@
# 尺寸
```html
<n-space vertical>
<n-auto-complete :options="options" v-model:value="value" placeholder="邮箱" size="small" />
<n-auto-complete :options="options" v-model:value="value" placeholder="邮箱" size="medium" />
<n-auto-complete :options="options" v-model:value="value" placeholder="邮箱" size="large" />
<n-auto-complete
:options="options"
v-model:value="value"
placeholder="邮箱"
size="small"
/>
<n-auto-complete
:options="options"
v-model:value="value"
placeholder="邮箱"
size="medium"
/>
<n-auto-complete
:options="options"
v-model:value="value"
placeholder="邮箱"
size="large"
/>
</n-space>
```
```js
export default {
computed: {
options () {
return [
'@gmail.com',
'@163.com',
'@qq.com'
].map(suffix => {
options() {
return ['@gmail.com', '@163.com', '@qq.com'].map((suffix) => {
const prefix = this.value.split('@')[0]
return {
label: prefix + suffix,
value: prefix + suffix,
value: prefix + suffix
}
})
}
},
data () {
data() {
return {
value: ''
}

4
demo/documentation/components/avatar/enUS/badge.demo.md
View File

@ -1,7 +1,9 @@
# Badge
Using it with badge would be nice (if you like tons of notifications).
```html
<n-badge value="999+">
<n-avatar>App</n-avatar>
</n-badge>
```
```

11
demo/documentation/components/avatar/enUS/color.demo.md
View File

@ -1,7 +1,10 @@
# 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="{
<n-avatar
:themed-style="{
light: {
color: 'yellow',
backgroundColor: 'red'
@ -10,5 +13,7 @@ Color is depend on you even in different theme. You can set it to something rela
color: 'red',
backgroundColor: 'yellow'
}
}">M</n-avatar>
```
}"
>M</n-avatar
>
```

9
demo/documentation/components/avatar/enUS/icon.demo.md
View File

@ -1,5 +1,7 @@
# Icon
I like using icon in avatar.
```html
<n-avatar>
<n-icon>
@ -7,12 +9,9 @@ I like using icon in avatar.
</n-icon>
</n-avatar>
```
```js
import {
MdCash,
MdContacts,
IosContacts
} from '@vicons/ionicons-v4'
import { MdCash, MdContacts, IosContacts } from '@vicons/ionicons-v4'
export default {
components: {

26
demo/documentation/components/avatar/enUS/index.demo-entry.md
View File

@ -1,6 +1,9 @@
# Avatar
On the Internet, nobody knows you're a dog, even if you use a dog picture as avatar.
## Demos
```demo
size
shape
@ -9,16 +12,19 @@ badge
icon
name-size
```
## Props
|Name|Type|Default|Description|
|-|-|-|-|
|size|`'small' \| 'medium' \| 'large' \| number`| `'medium'`||
|src|`string`|`undefined`||
|round|`boolean`|`false`||
|theme|`'light' \| 'dark' \| string`|`undefined`||
|themed-style|`{ [themeName: string]: Object }`|`undefined`||
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| size | `'small' \| 'medium' \| 'large' \| number` | `'medium'` | |
| src | `string` | `undefined` | |
| round | `boolean` | `false` | |
| theme | `'light' \| 'dark' \| string` | `undefined` | |
| themed-style | `{ [themeName: string]: Object }` | `undefined` | |
## Slots
|Name|Parameters|Description|
|-|-|-|
|default|`()`||
| Name | Parameters | Description |
| ------- | ---------- | ----------- |
| default | `()` | |

9
demo/documentation/components/avatar/enUS/name-size.demo.md
View File

@ -1,18 +1,21 @@
# Content Size
Words' sizing would be auto adjusted in avatar.
```html
<n-space vertical item-style="line-height: 0;">
<n-space>
<n-avatar>{{ value }}</n-avatar>
<n-avatar circle>{{ value }}</n-avatar>
<n-avatar circle>the <br>{{ value }}</n-avatar>
<n-avatar circle>the <br />{{ value }}</n-avatar>
</n-space>
<n-input v-model:value="value"/>
<n-input v-model:value="value" />
</n-space>
```
```js
export default {
data () {
data() {
return {
value: 'Oasis'
}

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

@ -4,9 +4,25 @@ Avatar can be circle shaped.
```html
<n-space align="flex-end">
<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"/>
<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"
/>
</n-space>
```

20
demo/documentation/components/avatar/enUS/size.demo.md
View File

@ -4,9 +4,21 @@ Avatar has `small`, `medium` and `large` size. You could alse custom size by a p
```html
<n-space align="flex-end">
<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"/>
<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"
/>
</n-space>
```

2
demo/documentation/components/avatar/zhCN/badge.demo.md
View File

@ -1,5 +1,7 @@
# 标记
和 Badge 一起用也挺好的 (如果你喜欢看到一堆一堆的推送)。
```html
<n-badge value="999+">
<n-avatar>App</n-avatar>

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

@ -1,7 +1,10 @@
# 颜色
颜色可以对不同主题分别设定的，你可以把它设成某种和你爱吃的东西有关的颜色。
```html
<n-avatar :themed-style="{
<n-avatar
:themed-style="{
light: {
color: 'yellow',
backgroundColor: 'red'
@ -10,5 +13,7 @@
color: 'red',
backgroundColor: 'yellow'
}
}">M</n-avatar>
}"
>M</n-avatar
>
```

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

@ -1,5 +1,7 @@
# 图标
我喜欢用图标当头像。
```html
<n-avatar>
<n-icon>
@ -7,12 +9,9 @@
</n-icon>
</n-avatar>
```
```js
import {
MdCash,
MdContacts,
IosContacts
} from '@vicons/ionicons-v4'
import { MdCash, MdContacts, IosContacts } from '@vicons/ionicons-v4'
export default {
components: {

26
demo/documentation/components/avatar/zhCN/index.demo-entry.md
View File

@ -1,6 +1,9 @@
# 头像 Avatar
在互联网上，没有人知道你是一条狗。即使你的头像是一只狗。
## 演示
```demo
size
shape
@ -9,16 +12,19 @@ badge
icon
name-size
```
## Props
|名称|类型|默认值|说明|
|-|-|-|-|
|size|`'small' \| 'medium' \| 'large' \| number`| `'medium'`||
|src|`string`|`undefined`||
|round|`boolean`|`false`||
|theme|`'light' \| 'dark' \| string`|`undefined`||
|themed-style|`{ [themeName: string]: Object }`|`undefined`||
| 名称 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| size | `'small' \| 'medium' \| 'large' \| number` | `'medium'` | |
| src | `string` | `undefined` | |
| round | `boolean` | `false` | |
| theme | `'light' \| 'dark' \| string` | `undefined` | |
| themed-style | `{ [themeName: string]: Object }` | `undefined` | |
## Slots
|名称|参数|说明|
|-|-|-|
|default|`()`||
| 名称 | 参数 | 说明 |
| ------- | ---- | ---- |
| default | `()` | |

9
demo/documentation/components/avatar/zhCN/name-size.demo.md
View File

@ -1,18 +1,21 @@
# 字号
字号会根据内容文字自动调整。
```html
<n-space vertical item-style="line-height: 0;">
<n-space>
<n-avatar>{{ value }}</n-avatar>
<n-avatar circle>{{ value }}</n-avatar>
<n-avatar circle>the <br>{{ value }}</n-avatar>
<n-avatar circle>the <br />{{ value }}</n-avatar>
</n-space>
<n-input v-model:value="value"/>
<n-input v-model:value="value" />
</n-space>
```
```js
export default {
data () {
data() {
return {
value: 'Oasis'
}

24
demo/documentation/components/avatar/zhCN/shape.demo.md
View File

@ -4,9 +4,25 @@
```html
<n-space align="flex-end">
<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"/>
<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"
/>
</n-space>
```

20
demo/documentation/components/avatar/zhCN/size.demo.md
View File

@ -4,9 +4,21 @@
```html
<n-space align="flex-end">
<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"/>
<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"
/>
</n-space>
```

6
demo/documentation/components/back-top/enUS/basic.demo.md
View File

@ -1,5 +1,7 @@
# Basic
BackTop will find its first scrollable ascendant element and listen scroll event on it.
```html
<n-back-top/>
```
<n-back-top />
```

10
demo/documentation/components/back-top/enUS/change-position.demo.md
View File

@ -1,7 +1,9 @@
# Change Position
For example: right 40px & bottom 160px.
```html
<n-back-top
<n-back-top
:right="40"
:bottom="160"
:style="{
@ -18,8 +20,10 @@ For example: right 40px & bottom 160px.
}
}"
>
<div style="width: 200px; height: 40px; line-height: 40px; text-align: center; font-size: 14px;">
<div
style="width: 200px; height: 40px; line-height: 40px; text-align: center; font-size: 14px;"
>
Change Position
</div>
</n-back-top>
```
```

27
demo/documentation/components/back-top/enUS/index.demo-entry.md
View File

@ -1,7 +1,11 @@
# Back Top
<!--single-column-->
It helps you back to where you were. However, time never goes back.
## Demos
Scroll down to see demos work.
```demo
@ -12,14 +16,15 @@ target-container-selector
```
## Props
|Name|Type|Default|Description|
|-|-|-|-|
|bottom|`number \| string`|`40`||
|listen-to|`string \| HTMLElement`|`undefined`|The element to be listened to scroll event. If it is `undefined` back top will listen to the nearest scrollable parent.|
|right|`number \| string`|`40`||
|show|`boolean`|`undefined`|Whether to show BackTop|
|themed-style|`{ [themeName: string]: Object }`|`undefined`||
|theme|`'light' \| 'dark' \| string`|`undefined`||
|to|`string \| HTMLElement`|`'body'`|Container node to show BackTop|
|visibility-height|`number`|`180`||
|on-update:show|`(value: boolean) => any`|`undefined`||
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| bottom | `number \| string` | `40` | |
| listen-to | `string \| HTMLElement` | `undefined` | The element to be listened to scroll event. If it is `undefined` back top will listen to the nearest scrollable parent. |
| right | `number \| string` | `40` | |
| show | `boolean` | `undefined` | Whether to show BackTop |
| themed-style | `{ [themeName: string]: Object }` | `undefined` | |
| theme | `'light' \| 'dark' \| string` | `undefined` | |
| to | `string \| HTMLElement` | `'body'` | Container node to show BackTop |
| visibility-height | `number` | `180` | |
| on-update:show | `(value: boolean) => any` | `undefined` | |

30
demo/documentation/components/back-top/enUS/target-container-selector.demo.md
View File

@ -1,5 +1,7 @@
# Target to be Listened to
You can specify target to listen scroll event of.
```html
<n-back-top
:listen-to="target"
@ -19,26 +21,32 @@ You can specify target to listen scroll event of.
}
}"
>
<div style="width: 200px; height: 40px; line-height: 40px; text-align: center; font-size: 14px;">
<div
style="width: 200px; height: 40px; line-height: 40px; text-align: center; font-size: 14px;"
>
Specify Target
</div>
</n-back-top>
<div ref="scrollContainer" style="overflow: auto; height: 72px; line-height: 1.5;">
A funny joke is need to be wrote here.<br/>
A funny joke is need to be wrote here.<br/>
A funny joke is need to be wrote here.<br/>
A funny joke is need to be wrote here.<br/>
A funny joke is need to be wrote here.<br/>
A funny joke is need to be wrote here.<br/>
A funny joke is need to be wrote here.<br/>
<div
ref="scrollContainer"
style="overflow: auto; height: 72px; line-height: 1.5;"
>
A funny joke is need to be wrote here.<br />
A funny joke is need to be wrote here.<br />
A funny joke is need to be wrote here.<br />
A funny joke is need to be wrote here.<br />
A funny joke is need to be wrote here.<br />
A funny joke is need to be wrote here.<br />
A funny joke is need to be wrote here.<br />
</div>
```
```js
export default {
data () {
data() {
return {
target: () => this.$refs.scrollContainer
}
}
}
```
```

10
demo/documentation/components/back-top/enUS/visibility-height.demo.md
View File

@ -1,7 +1,9 @@
# Visibility Height
You can change visibility height of backtop.
```html
<n-back-top
<n-back-top
:bottom="100"
:visibility-height="300"
:style="{
@ -18,8 +20,10 @@ You can change visibility height of backtop.
}
}"
>
<div style="width: 200px; height: 40px; line-height: 40px; text-align: center; font-size: 14px;">
<div
style="width: 200px; height: 40px; line-height: 40px; text-align: center; font-size: 14px;"
>
Visibility Height: 300px
</div>
</n-back-top>
```
```

4
demo/documentation/components/back-top/zhCN/basic.demo.md
View File

@ -1,5 +1,7 @@
# 基础用法
BackTop 会找到首个可滚动的祖先元素并且监听它的滚动事件。
```html
<n-back-top />
```
```

10
demo/documentation/components/back-top/zhCN/change-position.demo.md
View File

@ -1,7 +1,9 @@
# 改变位置
例如：right 40px & bottom 160px。
```html
<n-back-top
<n-back-top
:right="40"
:bottom="160"
:themed-style="{
@ -15,8 +17,10 @@
}
}"
>
<div style="width: 200px; height: 40px; line-height: 40px; text-align: center; font-size: 14px;">
<div
style="width: 200px; height: 40px; line-height: 40px; text-align: center; font-size: 14px;"
>
改变位置
</div>
</n-back-top>
```
```

27
demo/documentation/components/back-top/zhCN/index.demo-entry.md
View File

@ -1,7 +1,11 @@
# 回到顶部 Back Top
<!--single-column-->
它可以帮你回到你曾经到过的地方。不过时间是回不去了。
## 演示
向下滚动页面查看效果。
```demo
@ -12,14 +16,15 @@ target-container-selector
```
## Props
|名称|类型|默认值|说明|
|-|-|-|-|
|bottom|`number`|`40`||
|listen-to|`string \| HTMLElement`|`undefined`|监听滚动的元素，如果为 `undefined` 会监听距离最近的一个可滚动的祖先节点|
|right|`number`|`40`||
|show|`boolean`|`undefined`|是否显示 BackTop（受控）|
|themed-style|`{ [themeName: string]: Object }`|`undefined`||
|theme|`'light' \| 'dark' \| string`|`undefined`||
|to|`string \| HTMLElement`|`'body'`|BackTop 渲染的容器节点|
|visibility-height|`number`|`180`||
|on-update:show|`(value: boolean) => any`|`undefined`||
| 名称 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| bottom | `number` | `40` | |
| listen-to | `string \| HTMLElement` | `undefined` | 监听滚动的元素，如果为 `undefined` 会监听距离最近的一个可滚动的祖先节点 |
| right | `number` | `40` | |
| show | `boolean` | `undefined` | 是否显示 BackTop（受控） |
| themed-style | `{ [themeName: string]: Object }` | `undefined` | |
| theme | `'light' \| 'dark' \| string` | `undefined` | |
| to | `string \| HTMLElement` | `'body'` | BackTop 渲染的容器节点 |
| visibility-height | `number` | `180` | |
| on-update:show | `(value: boolean) => any` | `undefined` | |

30
demo/documentation/components/back-top/zhCN/target-container-selector.demo.md
View File

@ -1,5 +1,7 @@
# 监听目标
你可以设定监听哪个元素来触发 Back Top。
```html
<n-back-top
:listen-to="target"
@ -16,26 +18,32 @@
}
}"
>
<div style="width: 200px; height: 40px; line-height: 40px; text-align: center; font-size: 14px;">
<div
style="width: 200px; height: 40px; line-height: 40px; text-align: center; font-size: 14px;"
>
指定目标
</div>
</n-back-top>
<div ref="scrollContainer" style="overflow: auto; height: 72px; line-height: 1.5;">
这块应该写一个有意思的笑话。<br/>
这块应该写一个有意思的笑话。<br/>
这块应该写一个有意思的笑话。<br/>
这块应该写一个有意思的笑话。<br/>
这块应该写一个有意思的笑话。<br/>
这块应该写一个有意思的笑话。<br/>
这块应该写一个有意思的笑话。<br/>
<div
ref="scrollContainer"
style="overflow: auto; height: 72px; line-height: 1.5;"
>
这块应该写一个有意思的笑话。<br />
这块应该写一个有意思的笑话。<br />
这块应该写一个有意思的笑话。<br />
这块应该写一个有意思的笑话。<br />
这块应该写一个有意思的笑话。<br />
这块应该写一个有意思的笑话。<br />
这块应该写一个有意思的笑话。<br />
</div>
```
```js
export default {
data () {
data() {
return {
target: () => this.$refs.scrollContainer
}
}
}
```
```

10
demo/documentation/components/back-top/zhCN/visibility-height.demo.md
View File

@ -1,7 +1,9 @@
# 可视高度
可以改变 Back Top 的可视高度。
```html
<n-back-top
<n-back-top
:bottom="100"
:visibility-height="300"
:themed-style="{
@ -15,8 +17,10 @@
}
}"
>
<div style="width: 200px; height: 40px; line-height: 40px; text-align: center; font-size: 14px;">
<div
style="width: 200px; height: 40px; line-height: 40px; text-align: center; font-size: 14px;"
>
可视高度：300px
</div>
</n-back-top>
```
```

11
demo/documentation/components/badge/enUS/basic.demo.md
View File

@ -1,4 +1,5 @@
# Basic
```html
<n-space :size="24" align="center">
<n-badge :value="value" :max="15">
@ -21,21 +22,19 @@
</n-button-group>
</n-space>
```
```js
import {
MdAdd,
MdRemove
} from '@vicons/ionicons-v4'
import { MdAdd, MdRemove } from '@vicons/ionicons-v4'
export default {
components: {
MdAdd,
MdRemove
},
data () {
data() {
return {
value: 5
}
}
}
```
```

8
demo/documentation/components/badge/enUS/color.demo.md
View File

@ -1,9 +1,7 @@
# Custom Color
```html
<n-badge
value="15"
color="grey"
>
<n-badge value="15" color="grey">
<n-avatar />
</n-badge>
```
```

4
demo/documentation/components/badge/enUS/custom-content.demo.md
View File

@ -1,5 +1,7 @@
# Custom Content
Insert some custom content in it.
```html
<n-space :size="24" align="center">
<n-badge value="new">
@ -9,4 +11,4 @@ Insert some custom content in it.
<n-avatar />
</n-badge>
</n-space>
```
```

36
demo/documentation/components/badge/enUS/index.demo-entry.md
View File

@ -1,6 +1,9 @@
# Badge
I bet you have seen it and know how it should be applied.
## Demos
```demo
basic
type
@ -11,21 +14,24 @@ manual
custom-content
raw
```
## Props
|Name|Type|Default|Description|
|-|-|-|-|
|color|`string`|`undefined`||
|dot|`boolean`|`false`||
|max|`number`|`undefined`||
|processing|`boolean`|`false`||
|show-zero|`boolean`|`false`||
|show|`boolean`|`true`||
|themed-style|`{ [themeName: string]: Object }`|`undefined`||
|theme|`'light' \| 'dark' \| string`|`undefined`||
|type|`'default' \| 'success' \| 'error' \| 'warning' \| 'info'`|`'default'`||
|value|`string \| number`|`undefined`||
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| color | `string` | `undefined` | |
| dot | `boolean` | `false` | |
| max | `number` | `undefined` | |
| processing | `boolean` | `false` | |
| show-zero | `boolean` | `false` | |
| show | `boolean` | `true` | |
| themed-style | `{ [themeName: string]: Object }` | `undefined` | |
| theme | `'light' \| 'dark' \| string` | `undefined` | |
| type | `'default' \| 'success' \| 'error' \| 'warning' \| 'info'` | `'default'` | |
| value | `string \| number` | `undefined` | |
## Slots
|Name|Parameters|Description|
|-|-|-|
|default|`()`||
| Name | Parameters | Description |
| ------- | ---------- | ----------- |
| default | `()` | |

15
demo/documentation/components/badge/enUS/manual.demo.md
View File

@ -1,4 +1,5 @@
# Controlled Display
```html
<n-space :size="24" align="center" item-style="display: flex;">
<n-badge :value="value" :max="15" :show="show">
@ -13,31 +14,29 @@
<n-icon><md-add /></n-icon>
</template>
</n-button>
<n-button @click="value = Math.max(0, value - 1)" >
<n-button @click="value = Math.max(0, value - 1)">
<template v-slot:icon>
<n-icon><md-remove /></n-icon>
</template>
</n-button>
</n-button-group>
<n-switch v-model:value="show"/>
<n-switch v-model:value="show" />
</n-space>
```
```js
import {
MdAdd,
MdRemove
} from '@vicons/ionicons-v4'
import { MdAdd, MdRemove } from '@vicons/ionicons-v4'
export default {
components: {
MdAdd,
MdRemove
},
data () {
data() {
return {
value: 5,
show: true
}
}
}
```
```

14
demo/documentation/components/badge/enUS/overflow.demo.md
View File

@ -1,5 +1,7 @@
# Overflow
Set `max` prop to handle overflow situation.
```html
<n-space :size="24" align="center">
<n-badge :value="value" show-zero>
@ -20,7 +22,7 @@ Set `max` prop to handle overflow situation.
<n-icon><md-add /></n-icon>
</template>
</n-button>
<n-button @click="value = Math.max(0, value - 1)" >
<n-button @click="value = Math.max(0, value - 1)">
<template v-slot:icon>
<n-icon><md-remove /></n-icon>
</template>
@ -28,21 +30,19 @@ Set `max` prop to handle overflow situation.
</n-button-group>
</n-space>
```
```js
import {
MdAdd,
MdRemove
} from '@vicons/ionicons-v4'
import { MdAdd, MdRemove } from '@vicons/ionicons-v4'
export default {
components: {
MdAdd,
MdRemove
},
data () {
data() {
return {
value: 101
}
}
}
```
```

4
demo/documentation/components/badge/enUS/processing.demo.md
View File

@ -1,5 +1,7 @@
# Processing
Set `processing` prop to indicate it is processing.
```html
<n-space :size="24" align="center">
<n-badge dot processing>
@ -12,4 +14,4 @@ Set `processing` prop to indicate it is processing.
<n-avatar />
</n-badge>
</n-space>
```
```

13
demo/documentation/components/badge/enUS/raw.demo.md
View File

@ -1,8 +1,9 @@
# Raw
```html
<n-space :size="24" align="center" item-style="display: flex;">
<n-badge :value="value" :max="15" />
<n-badge :value="value" dot/>
<n-badge :value="value" dot />
<n-button-group>
<n-button @click="value = Math.min(16, value + 1)">
<template v-slot:icon>
@ -17,21 +18,19 @@
</n-button-group>
</n-space>
```
```js
import {
MdAdd,
MdRemove
} from '@vicons/ionicons-v4'
import { MdAdd, MdRemove } from '@vicons/ionicons-v4'
export default {
components: {
MdAdd,
MdRemove
},
data () {
data() {
return {
value: 5
}
}
}
```
```

12
demo/documentation/components/badge/enUS/show-zero.demo.md
View File

@ -1,5 +1,7 @@
# Show Zero
Set `show-zero` prop to display zero.
```html
<n-space :size="24" align="center">
<n-badge :value="value">
@ -22,21 +24,19 @@ Set `show-zero` prop to display zero.
</n-button-group>
</n-space>
```
```js
import {
MdAdd,
MdRemove
} from '@vicons/ionicons-v4'
import { MdAdd, MdRemove } from '@vicons/ionicons-v4'
export default {
components: {
MdAdd,
MdRemove
},
data () {
data() {
return {
value: 0
}
}
}
```
```

7
demo/documentation/components/badge/enUS/type.demo.md
View File

@ -1,5 +1,7 @@
# Type
Badge has `default`, `error`, `info`, `success`, `warning` types.
```html
<n-space :size="24" align="center">
<n-badge dot>
@ -19,12 +21,13 @@ Badge has `default`, `error`, `info`, `success`, `warning` types.
</n-badge>
</n-space>
```
```js
export default {
data () {
data() {
return {
value: 10
}
}
}
```
```

11
demo/documentation/components/badge/zhCN/basic.demo.md
View File

@ -1,4 +1,5 @@
# 基础用法
```html
<n-space :size="24" align="center">
<n-badge :value="value" :max="15">
@ -21,21 +22,19 @@
</n-button-group>
</n-space>
```
```js
import {
MdAdd,
MdRemove
} from '@vicons/ionicons-v4'
import { MdAdd, MdRemove } from '@vicons/ionicons-v4'
export default {
components: {
MdAdd,
MdRemove
},
data () {
data() {
return {
value: 5
}
}
}
```
```

8
demo/documentation/components/badge/zhCN/color.demo.md
View File

@ -1,9 +1,7 @@
# 自定义颜色
```html
<n-badge
value="15"
color="grey"
>
<n-badge value="15" color="grey">
<n-avatar />
</n-badge>
```
```

4
demo/documentation/components/badge/zhCN/custom-content.demo.md
View File

@ -1,5 +1,7 @@
# 自定义内容
在里面插入一些自定义内容。
```html
<n-space :size="24" align="center">
<n-badge value="新">
@ -9,4 +11,4 @@
<n-avatar />
</n-badge>
</n-space>
```
```

36
demo/documentation/components/badge/zhCN/index.demo-entry.md
View File

@ -1,6 +1,9 @@
# 标记 Badge
我敢说你肯定见过这玩意而且知道怎么用它。
## 演示
```demo
basic
type
@ -12,21 +15,24 @@ custom-content
color
raw
```
## Props
|名称|类型|默认值|说明|
|-|-|-|-|
|color|`string`|`undefined`||
|dot|`boolean`|`false`||
|max|`number`|`undefined`||
|processing|`boolean`|`false`||
|show-zero|`boolean`|`false`||
|show|`boolean`|`true`||
|themed-style|`{ [themeName: string]: Object }`|`undefined`||
|theme|`'light' \| 'dark' \| string`|`undefined`||
|type|`'default' \| 'success' \| 'error' \| 'warning' \| 'info'`|`'default'`||
|value|`string \| number`|`undefined`||
| 名称 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| color | `string` | `undefined` | |
| dot | `boolean` | `false` | |
| max | `number` | `undefined` | |
| processing | `boolean` | `false` | |
| show-zero | `boolean` | `false` | |
| show | `boolean` | `true` | |
| themed-style | `{ [themeName: string]: Object }` | `undefined` | |
| theme | `'light' \| 'dark' \| string` | `undefined` | |
| type | `'default' \| 'success' \| 'error' \| 'warning' \| 'info'` | `'default'` | |
| value | `string \| number` | `undefined` | |
## Slots
|名称|参数|说明|
|-|-|-|
|default|`()`||
| 名称 | 参数 | 说明 |
| ------- | ---- | ---- |
| default | `()` | |

15
demo/documentation/components/badge/zhCN/manual.demo.md
View File

@ -1,4 +1,5 @@
# 受控显示
```html
<n-space :size="24" align="center" item-style="display: flex;">
<n-badge :value="value" :max="15" :show="show">
@ -13,31 +14,29 @@
<n-icon><md-add /></n-icon>
</template>
</n-button>
<n-button @click="value = Math.max(0, value - 1)" >
<n-button @click="value = Math.max(0, value - 1)">
<template v-slot:icon>
<n-icon><md-remove /></n-icon>
</template>
</n-button>
</n-button-group>
<n-switch v-model:value="show"/>
<n-switch v-model:value="show" />
</n-space>
```
```js
import {
MdAdd,
MdRemove
} from '@vicons/ionicons-v4'
import { MdAdd, MdRemove } from '@vicons/ionicons-v4'
export default {
components: {
MdAdd,
MdRemove
},
data () {
data() {
return {
value: 5,
show: true
}
}
}
```
```

14
demo/documentation/components/badge/zhCN/overflow.demo.md
View File

@ -1,5 +1,7 @@
# 溢出
设定 `max` 来处理溢出情况。
```html
<n-space :size="24" align="center">
<n-badge :value="value" show-zero>
@ -20,7 +22,7 @@
<n-icon><md-add /></n-icon>
</template>
</n-button>
<n-button @click="value = Math.max(0, value - 1)" >
<n-button @click="value = Math.max(0, value - 1)">
<template v-slot:icon>
<n-icon><md-remove /></n-icon>
</template>
@ -28,21 +30,19 @@
</n-button-group>
</n-space>
```
```js
import {
MdAdd,
MdRemove
} from '@vicons/ionicons-v4'
import { MdAdd, MdRemove } from '@vicons/ionicons-v4'
export default {
components: {
MdAdd,
MdRemove
},
data () {
data() {
return {
value: 101
}
}
}
```
```

4
demo/documentation/components/badge/zhCN/processing.demo.md
View File

@ -1,5 +1,7 @@
# 处理中
设定 `processing` 来表明正在处理。
```html
<n-space :size="24" align="center">
<n-badge dot processing>
@ -12,4 +14,4 @@
<n-avatar />
</n-badge>
</n-space>
```
```

13
demo/documentation/components/badge/zhCN/raw.demo.md
View File

@ -1,8 +1,9 @@
# 直接使用
```html
<n-space :size="24" align="center" item-style="display: flex;">
<n-badge :value="value" :max="15" />
<n-badge :value="value" dot/>
<n-badge :value="value" dot />
<n-button-group>
<n-button @click="value = Math.min(16, value + 1)">
<template v-slot:icon>
@ -17,21 +18,19 @@
</n-button-group>
</n-space>
```
```js
import {
MdAdd,
MdRemove
} from '@vicons/ionicons-v4'
import { MdAdd, MdRemove } from '@vicons/ionicons-v4'
export default {
components: {
MdAdd,
MdRemove
},
data () {
data() {
return {
value: 5
}
}
}
```
```

12
demo/documentation/components/badge/zhCN/show-zero.demo.md
View File

@ -1,5 +1,7 @@
# 显示 0
设定 `show-zero` 来显示 0。
```html
<n-space :size="24" align="center">
<n-badge :value="value">
@ -22,21 +24,19 @@
</n-button-group>
</n-space>
```
```js
import {
MdAdd,
MdRemove
} from '@vicons/ionicons-v4'
import { MdAdd, MdRemove } from '@vicons/ionicons-v4'
export default {
components: {
MdAdd,
MdRemove
},
data () {
data() {
return {
value: 0
}
}
}
```
```

7
demo/documentation/components/badge/zhCN/type.demo.md
View File

@ -1,5 +1,7 @@
# 类型
标记有 `default`、`error`、`info`、`success`、`warning` 类型。
```html
<n-space :size="24" align="center">
<n-badge dot>
@ -19,12 +21,13 @@
</n-badge>
</n-space>
```
```js
export default {
data () {
data() {
return {
value: 10
}
}
}
```
```

19
demo/documentation/components/breadcrumb/enUS/basic.demo.md
View File

@ -1,14 +1,19 @@
# Basic
```html
<n-breadcrumb>
<n-breadcrumb-item><n-icon><md-save/></n-icon>
Home</n-breadcrumb-item>
<n-breadcrumb-item><n-icon><md-save/></n-icon>
Account</n-breadcrumb-item>
<n-breadcrumb-item><n-icon><md-save/></n-icon>
Category</n-breadcrumb-item>
<n-breadcrumb-item
><n-icon><md-save /></n-icon> Home</n-breadcrumb-item
>
<n-breadcrumb-item
><n-icon><md-save /></n-icon> Account</n-breadcrumb-item
>
<n-breadcrumb-item
><n-icon><md-save /></n-icon> Category</n-breadcrumb-item
>
</n-breadcrumb>
```
```js
import { MdCash } from '@vicons/ionicons-v4'
@ -17,4 +22,4 @@ export default {
MdCash
}
}
```
```

29
demo/documentation/components/breadcrumb/enUS/index.demo-entry.md
View File

@ -1,23 +1,32 @@
# Breadcrumb
It doesn't look like what it calls.
## Demos
```demo
basic
```
## Props
### Breadcrumb Props
|Name|Type|Default|Description|
|-|-|-|-|
|theme|`'light' \| 'dark' \| string`|`undefined`||
|separator|`string`|`'/'`||
| Name | Type | Default | Description |
| --------- | ----------------------------- | ----------- | ----------- |
| theme | `'light' \| 'dark' \| string` | `undefined` | |
| separator | `string` | `'/'` | |
## Slots
### Breadcrumb Slots
|Name|Parameters|Description|
|-|-|-|
|default|`()`||
| Name | Parameters | Description |
| ------- | ---------- | ----------- |
| default | `()` | |
### Breadcrumb Item Slots
|Name|Parameters|Description|
|-|-|-|
|default|`()`||
| Name | Parameters | Description |
| ------- | ---------- | ----------- |
| default | `()` | |

19
demo/documentation/components/breadcrumb/zhCN/basic.demo.md
View File

@ -1,14 +1,19 @@
# 基础用法
```html
<n-breadcrumb>
<n-breadcrumb-item><n-icon><md-cash/></n-icon>
北京总行</n-breadcrumb-item>
<n-breadcrumb-item><n-icon><md-cash/></n-icon>
天津分行</n-breadcrumb-item>
<n-breadcrumb-item><n-icon><md-cash/></n-icon>
平山道支行</n-breadcrumb-item>
<n-breadcrumb-item
><n-icon><md-cash /></n-icon> 北京总行</n-breadcrumb-item
>
<n-breadcrumb-item
><n-icon><md-cash /></n-icon> 天津分行</n-breadcrumb-item
>
<n-breadcrumb-item
><n-icon><md-cash /></n-icon> 平山道支行</n-breadcrumb-item
>
</n-breadcrumb>
```
```js
import { MdCash } from '@vicons/ionicons-v4'
@ -17,4 +22,4 @@ export default {
MdCash
}
}
```
```

29
demo/documentation/components/breadcrumb/zhCN/index.demo-entry.md
View File

@ -1,23 +1,32 @@
# 面包屑 Breadcrumb
这东西长得和它名字不怎么像。
## 演示
```demo
basic
```
## Props
### Breadcrumb Props
|名称|类型|默认值|说明|
|-|-|-|-|
|theme|`'light' \| 'dark' \| string`|`undefined`||
|separator|`string`|`'/'`||
| 名称 | 类型 | 默认值 | 说明 |
| --------- | ----------------------------- | ----------- | ---- |
| theme | `'light' \| 'dark' \| string` | `undefined` | |
| separator | `string` | `'/'` | |
## Slots
### Breadcrumb Slots
|名称|参数|说明|
|-|-|-|
|default|`()`||
| 名称 | 参数 | 说明 |
| ------- | ---- | ---- |
| default | `()` | |
### Breadcrumb Item Slots
|名称|参数|说明|
|-|-|-|
|default|`()`||
| 名称 | 参数 | 说明 |
| ------- | ---- | ---- |
| default | `()` | |

2
demo/documentation/components/button/enUS/basic.demo.md
View File

@ -1,5 +1,7 @@
# Basic
There are `default`, `primary`, `info`, `success`, `warning` and `error` type of button.
```html
<n-space>
<n-button>Default</n-button>

5
demo/documentation/components/button/enUS/color.demo.md
View File

@ -1,5 +1,7 @@
# Custom Color
The two colors look like toadstool.
The two colors look like toadstool.
```html
<n-space>
<n-button color="#8a2be2">
@ -52,6 +54,7 @@ The two colors look like toadstool.
</n-button>
</n-space>
```
```js
import { CashOutline as CashIcon } from '@vicons/ionicons-v5'

2
demo/documentation/components/button/enUS/dashed.demo.md
View File

@ -1,5 +1,7 @@
# Dashed
Use `dashed` to show dashed button.
```html
<n-space>
<n-button dashed>Default</n-button>

8
demo/documentation/components/button/enUS/disabled.demo.md
View File

@ -1,9 +1,7 @@
# Disabled
Button can be disabled.
```html
<n-button
disabled
>
Disabled
</n-button>
<n-button disabled> Disabled </n-button>
```

8
demo/documentation/components/button/enUS/events.demo.md
View File

@ -1,16 +1,16 @@
# Events
Handle events on button.
```html
<n-button @click="handleClick">
Click Me
</n-button>
<n-button @click="handleClick"> Click Me </n-button>
```
```js
export default {
inject: ['message'],
methods: {
handleClick () {
handleClick() {
this.message.info('Button Clicked')
}
}

2
demo/documentation/components/button/enUS/ghost.demo.md
View File

@ -1,5 +1,7 @@
# Ghost
Ghost button has transparent background.
```html
<n-space>
<n-button ghost>Default</n-button>

32
demo/documentation/components/button/enUS/group.demo.md
View File

@ -1,19 +1,17 @@
# Button Group
Button can be grouped.
```html
<n-space>
<n-button-group vertical>
<n-button
round
>
<n-button round>
<template v-slot:icon>
<log-in-icon />
</template>
Live a
</n-button>
<n-button
ghost
>
<n-button ghost>
<template v-slot:icon>
<log-in-icon />
</template>
@ -39,10 +37,7 @@ Button can be grouped.
</template>
Enough
</n-button>
<n-button
ghost
round
>
<n-button ghost round>
<template v-slot:icon>
<log-in-icon />
</template>
@ -50,9 +45,7 @@ Button can be grouped.
</n-button>
</n-button-group>
<n-button-group size="small">
<n-button
round
>
<n-button round>
<template v-slot:icon>
<log-in-icon />
</template>
@ -72,25 +65,19 @@ Button can be grouped.
</n-button>
</n-button-group>
<n-button-group>
<n-button
ghost
>
<n-button ghost>
<template v-slot:icon>
<log-in-icon />
</template>
Eat
</n-button>
<n-button
ghost
>
<n-button ghost>
<template v-slot:icon>
<log-in-icon />
</template>
One More
</n-button>
<n-button
round
>
<n-button round>
<template v-slot:icon>
<log-in-icon />
</template>
@ -99,6 +86,7 @@ Button can be grouped.
</n-button-group>
</n-space>
```
```js
import { LogInOutline as LogInIcon } from '@vicons/ionicons-v5'

3
demo/documentation/components/button/enUS/icon.demo.md
View File

@ -1,5 +1,7 @@
# Icon
Use icon in button.
```html
<n-space>
<n-button>
@ -16,6 +18,7 @@ Use icon in button.
</n-button>
</n-space>
```
```js
import { CashOutline as CashIcon } from '@vicons/ionicons-v5'

66
demo/documentation/components/button/enUS/index.demo-entry.md
View File

@ -1,6 +1,9 @@
# Button
Button is used to trigger some actions.
## Demos
```demo
basic
dashed
@ -15,40 +18,47 @@ loading
color
group
```
## Props
### Button Props
|Name|Type|Default|Description|
|-|-|-|-|
|attr-type|`'button' \| 'submit' \| 'reset'`|`'button'`|The DOM `type` attribute of the button.|
|block|`boolean`|`false`||
|circle|`boolean`|`false`||
|color|`string`|`undefined`|Only support `#FFF`, `#FFFFFF`, `rgb(0, 0, 0)` formatted colors.|
|dashed|`boolean`|`false`||
|disabled|`boolean`|`false`||
|ghost|`boolean`|`false`||
|icon-placement|`'left' \| 'right'`|`'left'`||
|keyboard|`boolean`|`true`|Whether is supports keyboard operation.|
|loading|`boolean`|`false`||
|round|`boolean`|`false`||
|size|`'tiny' \| 'small' \| 'medium' \| 'large'`|`'medium'`||
|text|`boolean`|`false`||
|theme|`'light' \| 'dark' \| string`|`undefined`||
|type|`'default' \| 'primary' \| 'success' \| 'info' \| 'warning' \| 'error'`|`'default'`||
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| attr-type | `'button' \| 'submit' \| 'reset'` | `'button'` | The DOM `type` attribute of the button. |
| block | `boolean` | `false` | |
| circle | `boolean` | `false` | |
| color | `string` | `undefined` | Only support `#FFF`, `#FFFFFF`, `rgb(0, 0, 0)` formatted colors. |
| dashed | `boolean` | `false` | |
| disabled | `boolean` | `false` | |
| ghost | `boolean` | `false` | |
| icon-placement | `'left' \| 'right'` | `'left'` | |
| keyboard | `boolean` | `true` | Whether is supports keyboard operation. |
| loading | `boolean` | `false` | |
| round | `boolean` | `false` | |
| size | `'tiny' \| 'small' \| 'medium' \| 'large'` | `'medium'` | |
| text | `boolean` | `false` | |
| theme | `'light' \| 'dark' \| string` | `undefined` | |
| type | `'default' \| 'primary' \| 'success' \| 'info' \| 'warning' \| 'error'` | `'default'` | |
### Button Group Props
|Name|Type|Default|Description|
|-|-|-|-|
|size|`'tiny' \| 'small' \| 'medium' \| 'large'`|`undefined`|The buttons' size in button group. If set, the button's size prop inner group won't work.|
|vertical|`boolean`|`false`||
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| size | `'tiny' \| 'small' \| 'medium' \| 'large'` | `undefined` | The buttons' size in button group. If set, the button's size prop inner group won't work. |
| vertical | `boolean` | `false` | |
## Slots
### Button Slots
|Name|Parameters|Description|
|-|-|-|
|default|`()`||
|icon|`()`||
| Name | Parameters | Description |
| ------- | ---------- | ----------- |
| default | `()` | |
| icon | `()` | |
### Button Group Slots
|Name|Parameters|Description|
|-|-|-|
|default|`()`||
| Name | Parameters | Description |
| ------- | ---------- | ----------- |
| default | `()` | |

12
demo/documentation/components/button/enUS/loading.demo.md
View File

@ -1,21 +1,19 @@
# Loading
Button has loading status.
```html
<n-button
:loading="loading"
icon-placement="left"
@click="loading = !loading"
>
<n-button :loading="loading" icon-placement="left" @click="loading = !loading">
Click Me
</n-button>
```
```js
export default {
data () {
data() {
return {
loading: false
}
}
}
```
```

5
demo/documentation/components/button/enUS/shape.demo.md
View File

@ -1,5 +1,7 @@
# Shape
Button has different shapes.
```html
<n-space>
<n-button circle>
@ -11,6 +13,7 @@ Button has different shapes.
<n-button>Rect</n-button>
</n-space>
```
```js
import { CashOutline as CashIcon } from '@vicons/ionicons-v5'
@ -19,4 +22,4 @@ export default {
CashIcon
}
}
```
```

2
demo/documentation/components/button/enUS/size.demo.md
View File

@ -1,5 +1,7 @@
# Size
Button can be `tiny`, `small`, `medium` and `large` size.
```html
<n-space align="baseline">
<n-button size="tiny">Small Small</n-button>

8
demo/documentation/components/button/enUS/text.demo.md
View File

@ -1,10 +1,9 @@
# Text Button
Somebody also calls it `link` button.
```html
<n-button
text
size="large"
>
<n-button text size="large">
<template v-slot:icon>
<n-icon>
<train-icon />
@ -13,6 +12,7 @@ Somebody also calls it `link` button.
The Engine is Still Spiting Smoke
</n-button>
```
```js
import { TrainOutline as TrainIcon } from '@vicons/ionicons-v5'

Some files were not shown because too many files have changed in this diff Show More