mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-03-07 13:48:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #385 from TuSimple/docs

Browse Source 
Docs
This commit is contained in:
07akioni 2021-07-05 16:58:58 +08:00 committed by GitHub
commit c13b7c78f3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 234 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
demo/pages/docs/import-on-demand/enUS/index.md
View File

@ -6,6 +6,8 @@ By default the component theme is light, locale is enUS, no extra imports is nee
For more info about theming, see [Customizing Theme](customize-theme).
## Import Directly
```html
<script>
import { defineComponent } from 'vue'
@ -47,3 +49,30 @@ For more info about theming, see [Customizing Theme](customize-theme).
}
</style>
```
## Install on Demand Globally
```js
import { createApp } from 'vue'
import {
// create naive ui
create,
// component
NButton
} from 'naive-ui'
const naive = create({
components: [NButton]
})
const app = createApp()
app.use(naive)
```
After the installation. You can use the components you installed in SFC like this.
```html
<template>
<n-button>naive-ui</n-button>
</template>
```

29
demo/pages/docs/import-on-demand/zhCN/index.md
View File

@ -6,6 +6,8 @@ Naive UI 支持 tree shaking，组件、语言、主题均可 tree-shaking。
了解更多关于主题设定的信息，参见[调整主题](customize-theme)。
## 直接引入
```html
<script>
import { defineComponent } from 'vue'
@ -47,3 +49,30 @@ Naive UI 支持 tree shaking，组件、语言、主题均可 tree-shaking。
}
</style>
```
## 按需全局安装组件
```js
import { createApp } from 'vue'
import {
// create naive ui
create,
// component
NButton
} from 'naive-ui'
const naive = create({
components: [NButton]
})
const app = createApp()
app.use(naive)
```
安装后，你可以这样在 SFC 中使用你安装的组件。
```html
<template>
<n-button>naive-ui</n-button>
</template>
```

29
demo/pages/docs/usage-sfc/enUS/index.md
View File

@ -44,6 +44,8 @@ If you can use vue setup script, you can use it like this.
No tree-shaking. Bundle will have redundant codes.
If you want to install globally but not want all components, please see [Import on Demand](import-on-demand).
```js
import { createApp } from 'vue'
import naive from 'naive-ui'
@ -59,30 +61,3 @@ After the installation. You can use all the components in you SFC like this.
<n-button>naive-ui</n-button>
</template>
```
### Install on Demand Globally
```js
import { createApp } from 'vue'
import {
// create naive ui
create,
// component
NButton
} from 'naive-ui'
const naive = create({
components: [NButton]
})
const app = createApp()
app.use(naive)
```
After the installation. You can use the components you installed in SFC like this.
```html
<template>
<n-button>naive-ui</n-button>
</template>
```

29
demo/pages/docs/usage-sfc/zhCN/index.md
View File

@ -44,6 +44,8 @@
失去 tree-shaking 的能力，打包有冗余代码。
如果你想全局安装但是不想安装全部组件，请参考[按需引入](import-on-demand)。
```js
import { createApp } from 'vue'
import naive from 'naive-ui'
@ -59,30 +61,3 @@ app.use(naive)
<n-button>naive-ui</n-button>
</template>
```
### 按需全局安装组件
```js
import { createApp } from 'vue'
import {
// create naive ui
create,
// component
NButton
} from 'naive-ui'
const naive = create({
components: [NButton]
})
const app = createApp()
app.use(naive)
```
安装后，你可以这样在 SFC 中使用你安装的组件。
```html
<template>
<n-button>naive-ui</n-button>
</template>
```

2
src/data-table/demos/zhCN/index.demo-entry.md
View File

@ -76,7 +76,7 @@ tree
这些方法可以帮助你在非受控的状态下改变表格，但是，并不推荐在异步的状况下使用这些方法。如果需要异步操作，最好用**受控**的方式使用表格。
| 名称 | 参数 | 说明 |
| 名称 | 类型 | 说明 |
| --- | --- | --- |
| clearFilters | `() => void` | 清空所有的 filter 状态 |
| clearSorter | `() => void` | 清空所有的 sort 状态 |

94
src/dialog/demos/enUS/index.demo-entry.md
View File

@ -42,30 +42,30 @@ use-component
### `useDialog` API
| Name | Type | Description |
| ---------- | ------------------------------------------- | ----------- |
| destroyAll | `() => void` | |
| create | `(options: DialogOption) => DialogReactive` | |
| error | `(options: DialogOption) => DialogReactive` | |
| info | `(options: DialogOption) => DialogReactive` | |
| success | `(options: DialogOption) => DialogReactive` | |
| warning | `(options: DialogOption) => DialogReactive` | |
| Name | Type | Description |
| --- | --- | --- |
| destroyAll | `() => void` | Destroy all popup dialogs. |
| create | `(options: DialogOption) => DialogReactive` | Create a dialog. |
| error | `(options: DialogOption) => DialogReactive` | Use error type dialog. |
| info | `(options: DialogOption) => DialogReactive` | Use info type dialog. |
| success | `(options: DialogOption) => DialogReactive` | Use success type dialog. |
| warning | `(options: DialogOption) => DialogReactive` | Use warning type dialog. |
### DialogOption Properties
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| bordered | `boolean` | `false` | |
| closable | `boolean` | `true` | |
| content | `string \| (() => VNodeChild)` | `undefined` | Can be a render function. |
| icon-placement | `'left' \| 'top'` | `'left'` | |
| icon | `() => VNodeChild` | `undefined` | Render function. |
| loading | `boolean` | `false` | |
| bordered | `boolean` | `false` | Whether to show border. |
| closable | `boolean` | `true` | Whether to show close icon. |
| content | `string \| (() => VNodeChild)` | `undefined` | Content, can be a render function. |
| icon-placement | `'left' \| 'top'` | `'left'` | Icon placement. |
| icon | `() => VNodeChild` | `undefined` | Render function of icon. |
| loading | `boolean` | `false` | Whether to display loading status. |
| negative-text | `string` | `undefined` | Corresponding button won't show if not set. |
| positive-text | `string` | `undefined` | Corresponding button won't show if not set. |
| show-icon | `boolean` | `true` | |
| title | `string \| (() => VNodeChild)` | `undefined` | Can be a render function. |
| type | `'error \| 'success' \| 'warning'` | `'warning'` | |
| show-icon | `boolean` | `true` | Whether to show icon. |
| title | `string \| (() => VNodeChild)` | `undefined` | Title, can be a render function. |
| type | `'error \| 'success' \| 'warning'` | `'warning'` | Dialog type. |
| onClose | `() => boolean \| Promise<boolean> \| any` | `undefined` | The default behavior is closing the confirm. Return `false` or resolve `false` or Promise rejected will prevent the default behavior. |
| onNegativeClick | `() => boolean \| Promise<boolean> \| any` | `undefined` | The default behavior is closing the confirm. Return `false` or resolve `false` or Promise rejected will prevent the default behavior. |
| onPositiveClick | `() => boolean \| Promise<boolean> \| any` | `undefined` | The default behavior is closing the confirm. Return `false` or resolve `false` or Promise rejected will prevent the default behavior. |
@ -78,26 +78,26 @@ All the properties can be modified dynamically.
| Name | Type | Description |
| --- | --- | --- |
| bordered | `boolean` | |
| closable | `boolean` | |
| content | `string \| (() => VNodeChild)` | Can be a render function. |
| icon-placement | `'left' \| 'top'` | |
| icon | `() => VNodeChild` | Render function. |
| loading | `boolean` | |
| bordered | `boolean` | Whether to show border. |
| closable | `boolean` | Whether to show close icon. |
| content | `string \| (() => VNodeChild)` | Content, can be a render function. |
| icon-placement | `'left' \| 'top'` | Icon placement. |
| icon | `() => VNodeChild` | Render function of icon. |
| loading | `boolean` | Whether to display loading status. |
| negative-text | `string` | Corresponding button won't show if not set. |
| positive-text | `string` | Corresponding button won't show if not set. |
| show-icon | `boolean` | |
| show-icon | `boolean` | Whether to show icon. |
| title | `string \| (() => VNodeChild)` | Can be a render function. |
| type | `'error \| 'success' \| 'warning'` | |
| onClose | `() => boolean \| Promise<boolean> \| any` | |
| onNegativeClick | `() => boolean \| Promise<boolean> \| any` | |
| onPositiveClick | `() => boolean \| Promise<boolean> \| any` | |
| type | `'error \| 'success' \| 'warning'` | Dialog type. |
| onClose | `() => boolean \| Promise<boolean> \| any` | The default behavior is closing the confirm. Return `false` or resolve `false` or Promise rejected will prevent the default behavior. |
| onNegativeClick | `() => boolean \| Promise<boolean> \| any` | The default behavior is closing the confirm. Return `false` or resolve `false` or Promise rejected will prevent the default behavior. |
| onPositiveClick | `() => boolean \| Promise<boolean> \| any` | The default behavior is closing the confirm. Return `false` or resolve `false` or Promise rejected will prevent the default behavior. |
#### DialogReactive Methods
| Name | Type | Description |
| ------- | ---- | ------------ |
| destroy | `()` | Close dialog |
| Name | Type | Description |
| ------- | ---- | ------------- |
| destroy | `()` | Close dialog. |
## Props
@ -105,28 +105,28 @@ All the properties can be modified dynamically.
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| bordered | `boolean` | `false` | |
| closable | `boolean` | `boolean` | |
| bordered | `boolean` | `false` | Whether to show border. |
| closable | `boolean` | `true` | Whether to show close icon. |
| content | `string \| (() => VNodeChild)` | `undefined` | Can be a render function. |
| icon-placement | `'left' \| 'top'` | `'left'` | |
| icon | `() => VNodeChild` | `undefined` | Render function. |
| loading | `boolean` | `false` | |
| icon-placement | `'left' \| 'top'` | `'left'` | Icon placement. |
| icon | `() => VNodeChild` | `undefined` | Render function of icon. |
| loading | `boolean` | `false` | Whether to display loading status. |
| negative-text | `string` | `undefined` | Corresponding button won't show if not set. |
| positive-text | `string` | `undefined` | Corresponding button won't show if not set. |
| show-icon | `boolean` | `true` | |
| title | `string \| (() => VNodeChild)` | `undefined` | Can be a render function. |
| type | `'error \| 'success' \| 'warning'` | `'warning'` | |
| on-close | `() => void` | |
| on-negative-click | `() => void` | |
| on-positive-click | `() => void` | |
| title | `string \| (() => VNodeChild)` | `undefined` | Title, can be a render function. |
| type | `'error \| 'success' \| 'warning'` | `'warning'` | Dialog type. |
| on-close | `() => void` | Callback function triggered when close dialog, the default behavior is closing the confirm. |
| on-negative-click | `() => void` | Callback function triggered when click negative text, the default behavior is closing the confirm. |
| on-positive-click | `() => void` | Callback function triggered when click positive text, the default behavior is closing the confirm. |
## Slots
### Dialog Slots
| Name | Parameters | Description |
| ------- | ---------- | ----------- |
| action | `()` | |
| default | `()` | Content |
| header | `()` | |
| icon | `()` | |
| Name | Parameters | Description |
| ------- | ---------- | --------------- |
| action | `()` | Action content. |
| default | `()` | Dialog content. |
| header | `()` | Header content. |
| icon | `()` | Icon content. |

88
src/dialog/demos/zhCN/index.demo-entry.md
View File

@ -43,30 +43,30 @@ use-component
### `useDialog` API
| 名称 | 类型 | 说明 |
| ---------- | ------------------------------------------- | ---- |
| destroyAll | `() => void` | |
| create | `(options: DialogOption) => DialogReactive` | |
| error | `(options: DialogOption) => DialogReactive` | |
| info | `(options: DialogOption) => DialogReactive` | |
| success | `(options: DialogOption) => DialogReactive` | |
| warning | `(options: DialogOption) => DialogReactive` | |
| 名称 | 类型 | 说明 |
| --- | --- | --- |
| destroyAll | `() => void` | 销毁所有弹出的对话框 |
| create | `(options: DialogOption) => DialogReactive` | 创建对话框 |
| error | `(options: DialogOption) => DialogReactive` | 调用 error 类型的对话框 |
| info | `(options: DialogOption) => DialogReactive` | 调用 info 类型的对话框 |
| success | `(options: DialogOption) => DialogReactive` | 调用 success 类型的对话框 |
| warning | `(options: DialogOption) => DialogReactive` | 调用 warning 类型的对话框 |
### DialogOption Properties
| 名称 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| bordered | `boolean` | `false` | |
| closable | `boolean` | `true` | |
| content | `string \| (() => VNodeChild)` | `undefined` | 可以是 render 函数 |
| icon-placement | `'left' \| 'top'` | `'left'` | |
| icon | `() => VNodeChild` | `undefined` | 需要是 render 函数 |
| loading | `boolean` | `false` | |
| bordered | `boolean` | `false` | 是否显示 border |
| closable | `boolean` | `true` | 是否显示 close 图标 |
| content | `string \| (() => VNodeChild)` | `undefined` | 对话框内容，可以是 render 函数 |
| icon-placement | `'left' \| 'top'` | `'left'` | 图标的位置 |
| icon | `() => VNodeChild` | `undefined` | 对话框 icon, 需要是 render 函数 |
| loading | `boolean` | `false` | 是否显示 loading 状态 |
| negative-text | `string` | `undefined` | 不填对应的按钮不会出现 |
| positive-text | `string` | `undefined` | 不填对应的按钮不会出现 |
| show-icon | `boolean` | `true` | |
| title | `string \| (() => VNodeChild)` | `undefined` | 可以是 render 函数 |
| type | `'error \| 'success' \| 'warning'` | `'warning'` | |
| show-icon | `boolean` | `true` | 是否显示 icon |
| title | `string \| (() => VNodeChild)` | `undefined` | 标题，可以是 render 函数 |
| type | `'error \| 'success' \| 'warning'` | `'warning'` | 对话框类型 |
| onClose | `() => boolean \| Promise<boolean> \| any` | `undefined` | 默认行为是关闭确认框。返回 `false` 或者 resolve `false` 或者 Promise 被 reject 会避免默认行为 |
| onNegativeClick | `() => boolean \| Promise<boolean> \| any` | `undefined` | 默认行为是关闭确认框。返回 `false` 或者 resolve `false` 或者 Promise 被 reject 会避免默认行为 |
| onPositiveClick | `() => boolean \| Promise<boolean> \| any` | `undefined` | 默认行为是关闭确认框。返回 `false` 或者 resolve `false` 或者 Promise 被 reject 会避免默认行为 |
@ -79,20 +79,20 @@ use-component
| 名称 | 类型 | 说明 |
| --- | --- | --- |
| bordered | `boolean` | |
| closable | `boolean` | |
| content | `string \| (() => VNodeChild)` | 可以是 render 函数 |
| icon-placement | `'left' \| 'top'` | |
| icon | `() => VNodeChild` | 需要是 render 函数 |
| loading | `boolean` | |
| bordered | `boolean` | 是否显示 border |
| closable | `boolean` | 是否显示 close 图标 |
| content | `string \| (() => VNodeChild)` | 对话框内容，可以是 render 函数 |
| icon-placement | `'left' \| 'top'` | 图标的位置 |
| icon | `() => VNodeChild` | 对话框 icon，需要是 render 函数 |
| loading | `boolean` | 是否显示 loading 状态 |
| negative-text | `string` | 不填对应的按钮不会出现 |
| positive-text | `string` | 不填对应的按钮不会出现 |
| show-icon | `boolean` | |
| show-icon | `boolean` | 是否显示 icon |
| title | `string \| (() => VNodeChild)` | 可以是 render 函数 |
| type | `'error \| 'success' \| 'warning'` | |
| onClose | `() => boolean \| Promise<boolean> \| any` | |
| onNegativeClick | `() => boolean \| Promise<boolean> \| any` | |
| onPositiveClick | `() => boolean \| Promise<boolean> \| any` | |
| type | `'error \| 'success' \| 'warning'` | 对话框类型 |
| onClose | `() => boolean \| Promise<boolean> \| any` | 默认行为是关闭确认框。返回 `false` 或者 resolve `false` 或者 Promise 被 reject 会避免默认行为 |
| onNegativeClick | `() => boolean \| Promise<boolean> \| any` | 默认行为是关闭确认框。返回 `false` 或者 resolve `false` 或者 Promise 被 reject 会避免默认行为 |
| onPositiveClick | `() => boolean \| Promise<boolean> \| any` | 默认行为是关闭确认框。返回 `false` 或者 resolve `false` 或者 Promise 被 reject 会避免默认行为 |
#### DialogReactive Methods
@ -106,27 +106,27 @@ use-component
| 名称 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| bordered | `boolean` | `false` | |
| closable | `boolean` | `boolean` | |
| content | `string \| (() => VNodeChild)` | `undefined` | 可以是 render 函数 |
| bordered | `boolean` | `false` | 是否显示 border |
| closable | `boolean` | `true` | 是否显示 close 图标 |
| content | `string \| (() => VNodeChild)` | `undefined` | 对话框内容，可以是 render 函数 |
| icon | `() => VNodeChild` | `undefined` | 需要是 render 函数 |
| loading | `boolean` | `false` | |
| loading | `boolean` | `false` | 是否显示 loading 状态 |
| negative-text | `string` | `undefined` | 不填对应的按钮不会出现 |
| positive-text | `string` | `undefined` | 不填对应的按钮不会出现 |
| show-icon | `boolean` | `true` | |
| title | `string \| (() => VNodeChild)` | `undefined` | 可以是 render 函数 |
| type | `'error \| 'success' \| 'warning'` | `'warning'` | |
| on-close | `() => void` | |
| on-negative-click | `() => void` | |
| on-positive-click | `() => void` | |
| show-icon | `boolean` | `true` | 是否显示 icon |
| title | `string \| (() => VNodeChild)` | `undefined` | 对话框标题，可以是 render 函数 |
| type | `'error \| 'success' \| 'warning'` | `'warning'` | 对话框类型 |
| on-close | `() => void` | 关闭时执行的回调函数,默认行为是关闭确认框。返回 `false` 或者 resolve `false` 或者 Promise 被 reject 会避免默认行为 |
| on-negative-click | `() => void` | 执行 negative 时执行的回调函数，默认行为是关闭确认框。返回 `false` 或者 resolve `false` 或者 Promise 被 reject 会避免默认行为 |
| on-positive-click | `() => void` | 执行 positive 时执行的回调函数，默认行为是关闭确认框。返回 `false` 或者 resolve `false` 或者 Promise 被 reject 会避免默认行为 |
## Slots
### Dialog Slots
| 名称 | 参数 | 说明 |
| ------- | ---- | ---- |
| action | `()` | |
| default | `()` | 内容 |
| header | `()` | |
| icon | `()` | |
| 名称 | 参数 | 说明 |
| ------- | ---- | ----------- |
| action | `()` | action 内容 |
| default | `()` | 对话框内容 |
| header | `()` | header 内容 |
| icon | `()` | icon 内容 |

30
src/input/demos/enUS/focus.demo.md Normal file
View File

@ -0,0 +1,30 @@
# Focus & Blur Manually
```html
<n-space vertical>
<n-space>
<n-button @click="handleFocus">Focus</n-button>
<n-button :focusable="false" @click="handleBlur">Blur</n-button>
</n-space>
<n-input ref="inputInstRef" />
</n-space>
```
```js
import { defineComponent, ref } from 'vue'
export default defineComponent({
setup () {
const inputInstRef = ref(null)
return {
inputInstRef,
handleFocus () {
inputInstRef.value.focus()
},
handleBlur () {
inputInstRef.value.blur()
}
}
}
})
```

10
src/input/demos/enUS/index.demo-entry.md
View File

@ -17,6 +17,7 @@ pair
input-group
passively-activated
count
focus
```
## Props
@ -73,3 +74,12 @@ count
| Name | Parameters | Description |
| ------- | ---------- | ----------- |
| default | `()` | |
## Methods
### Input Methods
| Name | Type | Description |
| ----- | ---------- | -------------------- |
| blur | () => void | Blur input element. |
| focus | () => void | Focus input element. |

30
src/input/demos/zhCN/focus.demo.md Normal file
View File

@ -0,0 +1,30 @@
# 手动 Focus & Blur
```html
<n-space vertical>
<n-space>
<n-button @click="handleFocus">Focus</n-button>
<n-button :focusable="false" @click="handleBlur">Blur</n-button>
</n-space>
<n-input ref="inputInstRef" />
</n-space>
```
```js
import { defineComponent, ref } from 'vue'
export default defineComponent({
setup () {
const inputInstRef = ref(null)
return {
inputInstRef,
handleFocus () {
inputInstRef.value.focus()
},
handleBlur () {
inputInstRef.value.blur()
}
}
}
})
```

10
src/input/demos/zhCN/index.demo-entry.md
View File

@ -17,6 +17,7 @@ pair
input-group
passively-activated
count
focus
```
## Props
@ -74,3 +75,12 @@ count
| 属性 | 类型 | 说明 |
| ------- | ---- | ---- |
| default | `()` | |
## Methods
### Input Methods
| 名称 | 类型 | 说明 |
| ----- | ---------- | ---------------- |
| blur | () => void | Blur input 元素 |
| focus | () => void | Focus input 元素 |