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

Merge pull request #81 from TuSimple/freestyle

Browse Source 
Freestyle
This commit is contained in:
07akioni 2020-03-09 10:58:08 +08:00 committed by GitHub Enterprise
commit 89ea6158b8
166 changed files with 1288 additions and 760 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
build/config.js
View File

@ -25,10 +25,6 @@ exports.docLoaders = [
},
loader: ['vue-loader', path.resolve(__dirname, '../demo/loaders/NaiveUIDemoLoader.js')]
},
// {
// test: /\.demo\.vue$/,
// loader: ['vue-loader', path.resolve(__dirname, '../doc/NaiveUIDemoLoader.js')]
// },
{
test: {
test: /\.vue$/

6
demo/docEntry.vue
View File

@ -3,6 +3,12 @@
ref="layout"
:padding-body="false"
:items="items"
:sider-style="{
height: 'calc(100vh - 64px)',
}"
:content-style="{
height: 'calc(100vh - 64px)',
}"
>
<router-view />
<landing-footer style="padding: 32px 204px 16px 56px; text-align: left; font-size: 14px;" />

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

@ -15,7 +15,8 @@ name-size
|size|`'small' \| 'medium' \| 'large' \| number`| `'medium'`||
|src|`string`|`null`||
|round|`boolean`|`false`||
|themed-style|`object`|`null`||
|theme|`'light' \| 'dark'`|`null`||
|themed-style|`{ [themeName: string]: object }`|`null`||
## Slots
|Name|Parameters|Description|

5
demo/documentation/components/avatar/zhCN/index.md
View File

@ -1,5 +1,5 @@
# 头像 Avatar
在互联网上，没有人知道你是一条狗。即使你的头像是一只狗狗。
在互联网上，没有人知道你是一条狗。即使你的头像是一只狗。
## 演示
```demo
size
@ -15,7 +15,8 @@ name-size
|size|`'small' \| 'medium' \| 'large' \| number`| `'medium'`||
|src|`string`|`null`||
|round|`boolean`|`false`||
|themed-style|`object`|`null`||
|theme|`'light' \| 'dark'`|`null`||
|themed-style|`{ [themeName: string]: object }`|`null`||
## Slots
|名称|参数|说明|

4
demo/documentation/components/button/enUS/index.md
View File

@ -27,12 +27,14 @@ debug
|circle|`boolean`|`false`||
|round|`boolean`|`false`||
|loading|`boolean`|`false`||
|keyboard|`boolean`|`true`|Whether is supports keyboard operation.｜
|icon-placement|`'left' \| 'right'`|`'left'`||
|theme|`'light' \| 'dark'`|`null`||
### Button Group Props
|Name|Type|Default|Description|
|-|-|-|-|
|size|`'small' \| 'medium' \| 'large'`|`null`|The buttons' size in button group. If set, the button's size prop inner group won't work.|
|size|`'tiny' \| 'small' \| 'medium' \| 'large'`|`null`|The buttons' size in button group. If set, the button's size prop inner group won't work.|
|vertical|`boolean`|`false`||
## Slots

4
demo/documentation/components/button/zhCN/index.md
View File

@ -27,12 +27,14 @@ debug
|circle|`boolean`|`false`||
|round|`boolean`|`false`||
|loading|`boolean`|`false`||
|keyboard|`boolean`|`true`|是否支持键盘操作|
|icon-placement|`'left' \| 'right'`|`'left'`||
|theme|`'light' \| 'dark'`|`null`||
### Button Group Props
|名称|类型|默认值|说明|
|-|-|-|-|
|size|`'small' \| 'medium' \| 'large'`|`'medium'`|在组内的按钮的尺寸。如果设定，内部的按钮尺寸将不生效|
|size|`'tiny' \| 'small' \| 'medium' \| 'large'`|`null`|在组内的按钮的尺寸。如果设定，内部的按钮尺寸将不生效|
|vertical|`boolean`|`false`||
## Slots

4
demo/documentation/components/card/enUS/index.md
View File

@ -16,10 +16,12 @@ closable
|title|`string`|`null`||
|content-style|`object \| string`|`null`||
|header-style|`object \| string`|`null`||
|segmented|`boolean \| object`|`false`||
|segmented|`boolean \| { [part in 'content' \| 'footer' \| 'action']?: boolean \| 'soft' \| 'hard' }`|`false`||
|size|`'small' \| 'medium' \| 'large' \| 'huge'`|`'medium'`||
|bordered|`boolean`|`true`||
|closable|`boolean`|`false`||
|theme|`'light' \| 'dark'`|`null`||
|themed-style|`{ [themeName: string]: object }`|`null`||
## Events
|Name|Parameters|Description|

2
demo/documentation/components/card/enUS/segment.md
View File

@ -1,5 +1,5 @@
# Segmented
`content`, `footer` and `action` can be `hard` or `soft` segmented. Segment border will appear at the top of segmented parts.
`content`, `footer` can be `hard` or `soft` segmented. `action` can be segmented. Segment border will appear at the top of segmented parts.
```html
<n-card title="Card Segmented Demo" :segmented="{
content: 'hard',

4
demo/documentation/components/card/zhCN/index.md
View File

@ -16,10 +16,12 @@ closable
|title|`string`|`null`||
|content-style|`object \| string`|`null`||
|header-style|`object \| string`|`null`||
|segmented|`boolean \| object`|`false`||
|segmented|`boolean \| { [part in 'content' \| 'footer' \| 'action']?: boolean \| 'soft' \| 'hard' }`|`false`||
|size|`'small' \| 'medium' \| 'large' \| 'huge'`|`'medium'`||
|bordered|`boolean`|`true`||
|closable|`boolean`|`false`||
|theme|`'light' \| 'dark'`|`null`||
|themed-style|`{ [themeName: string]: object }`|`null`||
## Events
|名称|参数|说明|

2
demo/documentation/components/card/zhCN/segment.md
View File

@ -1,5 +1,5 @@
# 分段
`content`、`footer` 和 `action` 可以被 `hard` 或 `soft` 分段，分段分割线会在区域的上方出现。
`content` 和 `footer` 可以被 `hard` 或 `soft` 分段，`action` 可以被分段。分段分割线会在区域的上方出现。
```html
<n-card title="卡片分段示例" :segmented="{
content: 'hard',

2
demo/documentation/components/code/zhCN/index.md
View File

@ -19,7 +19,7 @@ Vue.use(NaiveUI)
NaiveUI.setHljs(hljs)
```
## 例子
## 演示
```demo
basic

6
demo/documentation/components/collapse/enUS/index.md
View File

@ -9,13 +9,13 @@ nested
## V-model
|Prop|Event|
|-|-|
|expand-names|expand-names-change|
|expanded-names|expanded-names-change|
## Props
### Collapse
|Name|Type|Default|Description|
|-|-|-|-|
|expand-names|`Array`|`null`||
|expanded-names|`Array`|`null`||
|accordion|`boolean`|`false`||
### Collapse Item
@ -38,4 +38,4 @@ nested
## Event
|Name|Parameters|Description|
|-|-|-|
|expand-names|`(expandNames: Array<string>)`||
|expanded-names|`(expandedNames: Array<string>)`||

6
demo/documentation/components/collapse/zhCN/index.md
View File

@ -9,13 +9,13 @@ nested
## V-model
|Prop|Event|
|-|-|
|expand-names|expand-names-change|
|expanded-names|expanded-names-change|
## Props
### Collapse Props
|名称|类型|默认值|说明|
|-|-|-|-|
|expand-names|`Array`|`null`||
|expanded-names|`Array`|`null`||
|accordion|`boolean`|`false`||
### Collapse Item Props
@ -39,4 +39,4 @@ nested
## Event
|名称|参数|说明|
|-|-|-|
|expand-names|`(expandNames: Array<string>)`||
|expanded-names|`(expandedNames: Array<string>)`||

12
demo/documentation/components/configProvider/enUS/index.md
View File

@ -12,9 +12,9 @@ transparent
## Props
|Name|Type|Default|Description|
|-|-|-|-|
|as|`string`|`'div'`|What tag n-config-provider will be rendered as|
|language|`string`|`'en-US'`|Language of components inside n-config-provider|
|namespace|`string`|`null`|Class name of detached parts of components inside n-config-provider|
|theme|`string`|`null`|Theme name of components inside n-config-provider|
|theme-environment|`object`|`null`|An object with some value which can be accessed by n-config-consumer or n-element inside n-config-provider|
|abstract|`boolean`|`false`|If n-config-provider has no wrapper DOM|
|as|`string`|`'div'`|What tag `n-config-provider` will be rendered as|
|language|`string`|`'en-US'`|Language of components inside `n-config-provider`|
|namespace|`string`|`null`|Class name of detached parts of components inside `n-config-provider`|
|theme|`string`|`null`|Theme name of components inside `n-config-provider`|
|theme-environment|`{ [themeName: string]: any }`|`null`|An object with some value which can be accessed by `n-config-consumer` or `n-element` inside `n-config-provider`|
|abstract|`boolean`|`false`|If `n-config-provider` has no wrapper DOM|

2
demo/documentation/components/configProvider/enUS/inheritTheme.md
View File

@ -1,5 +1,5 @@
# Inherit Theme
If you don't set theme of config provider, the theme of config provider is inherited by default.
If you don't set theme of `n-config-provider`, the theme of `n-config-provider` is inherited by default.
```html
<n-config-provider>
<n-tag>Oops</n-tag>

2
demo/documentation/components/configProvider/enUS/namespace.md
View File

@ -1,5 +1,5 @@
# Namespace (Class on Detached DOM)
Some parts of component are detached to `document.body`. If you want to add a class to those detached elements, use `namespace` prop of config provider. Open devtools to see detached part.
Some parts of component are detached to `document.body`. If you want to add a class to those detached elements, use `namespace` prop of `n-config-provider`. Open devtools to see detached part.
```html
<n-config-provider :namespace="ns">
<n-tooltip

2
demo/documentation/components/configProvider/enUS/theme.md
View File

@ -1,5 +1,5 @@
# Theme
Set theme of inner components of config provider.
Set theme of inner components of `n-config-provider`.
```html
<n-config-provider :theme="theme">
<div style="background-color: rgba(128, 128, 128); padding: 8px;">

10
demo/documentation/components/configProvider/zhCN/index.md
View File

@ -12,10 +12,10 @@ transparent
## Props
|名称|类型|默认值|说明|
|-|-|-|-|
|as|`string`|`'div'`|Config Provider 被渲染成什么元素|
|language|`string`|`'en-US'`|Config Provider 内部的组件语言|
|namespace|`string`|`null`|Config Provider 内部组件被卸载于其他位置的 DOM 的类名|
|theme|`string`|`null`|Config Provider 内部组件的主题|
|theme-environment|`object`|`null`|一个可以被 Config Consumer 或 Element 获取到的主题环境变量|
|as|`string`|`'div'`|`n-config-provider` 被渲染成什么元素|
|language|`string`|`'en-US'`|`n-config-provider` 内部的组件语言|
|namespace|`string`|`null`|`n-config-provider` 内部组件被卸载于其他位置的 DOM 的类名|
|theme|`string`|`null`|`n-config-provider` 内部组件的主题|
|theme-environment|`{ [themeName: string]: any }`|`null`|一个可以被 `n-config-consumer` 或 `n-element` 获取到的主题环境变量，|
|abstract|`boolean`|`false`|是否不存在 DOM 包裹|

2
demo/documentation/components/configProvider/zhCN/inheritTheme.md
View File

@ -1,5 +1,5 @@
# 继承主题
如果不设置 Config Provider 的主题，则 Config Provider 主题默认继承。
如果不设置 `n-config-provider` 的主题，则 `n-config-provider` 主题默认继承外面的主题。
```html
<n-config-provider>
<n-tag>噢</n-tag>

2
demo/documentation/components/configProvider/zhCN/namespace.md
View File

@ -1,5 +1,5 @@
# 命名空间（卸载内容的类名）
组件的一部分是卸载在 `document.body` 上的。如需给这些卸载的元素添加 class，使用 Config Provider 的 `namespace` 属性。打开开发者工具可以看到被卸载的 DOM。
组件的一部分是卸载在 `document.body` 上的。如需给这些卸载的元素添加 class，使用 `n-config-provider` 的 `namespace` 属性。打开开发者工具可以看到被卸载的 DOM。
```html
<n-config-provider :namespace="ns">
<n-tooltip

2
demo/documentation/components/configProvider/zhCN/theme.md
View File

@ -1,5 +1,5 @@
# 主题
设置 Config Provider 内部组件的主题。
设置 `n-config-provider` 内部组件的主题。
```html
<n-config-provider :theme="theme">
<div style="background-color: rgba(128, 128, 128); padding: 8px;">

2
demo/documentation/components/configProvider/zhCN/transparent.md
View File

@ -1,4 +1,4 @@
# 无包裹 DOM
# 不需要包裹 DOM
如果不需要包裹 DOM，设置 `abstract`。(注意，这种情况下只接受一个子节点)
```html
<div>

3
demo/documentation/components/divider/enUS/index.md
View File

@ -14,8 +14,9 @@ vertical
|title-placement|`'left' \| 'right' \| 'center'`|`'center'`||
|dashed|`boolean`|`false`||
|vertical|`boolean`|`false`||
|theme|`'light' \| 'dark'`|`null`||
## Slots
|Name|Parameters|Description|
|-|-|-|
|default|`()`||
|default|`()`|The title of divider.|

3
demo/documentation/components/divider/zhCN/index.md
View File

@ -12,8 +12,9 @@ vertical
|title-placement|`'left' \| 'right' \| 'center'`|`'center'`||
|dashed|`boolean`|`false`||
|vertical|`boolean`|`false`||
|theme|`'light' \| 'dark'`|`null`||
## Slots
|名称|参数|说明|
|-|-|-|
|default|`()`||
|default|`()`|分割线的标题|

12
demo/documentation/components/dropdown/enUS/basic.md
View File

@ -1,8 +1,8 @@
# Basic
Basic usage of dropdown
```html
<n-dropdown @select="handleSelect" :focusable="false" :options="options">
<n-button>Money Force Us to Work Rather Than Sleep</n-button>
<n-dropdown @select="handleSelect" :options="options">
<n-button :keyboard="false">Money Force Us to Work Rather Than Sleep</n-button>
</n-dropdown>
```
```js
@ -12,19 +12,19 @@ export default {
options: [
{
label: 'Marina Bay Sands',
key: 'marina bay sands'
value: 'marina bay sands'
},
{
label: 'Brown\'s Hotel, London',
key: 'brown\'s hotel, london'
value: 'brown\'s hotel, london'
},
{
label: 'Atlantis Bahamas, Nassau',
key: 'atlantis nahamas, nassau'
value: 'atlantis nahamas, nassau'
},
{
label: 'The Beverly Hills Hotel, Los Angeles',
key: 'the beverly hills hotel, los angeles'
value: 'the beverly hills hotel, los angeles'
}
]
}

23
demo/documentation/components/dropdown/enUS/cascade.md
View File

@ -5,10 +5,9 @@ Dropdown can be cascade.
:options="options"
placement="bottom-start"
trigger="click"
:default-focus="false"
@select="handleSelect"
>
<n-button>People and Some Food to Eat</n-button>
<n-button :keyboard="false">People and Some Food to Eat</n-button>
</n-dropdown>
```
@ -16,44 +15,42 @@ Dropdown can be cascade.
const options = [
{
label: 'Jay Gatsby',
key: 'jay gatsby'
value: 'jay gatsby'
},
{
label: 'Daisy Buchanan',
key: 'daisy buchanan'
value: 'daisy buchanan'
},
{
type: 'divider'
},
{
label: 'Nick Carraway',
key: 'nick carraway'
value: 'nick carraway'
},
{
type: 'submenu',
label: 'Others',
key: 'others',
value: 'others',
children: [
{
label: 'Jordan Baker',
key: 'jordan baker'
value: 'jordan baker'
},
{
label: 'Tom Buchanan',
key: 'tom buchanan'
value: 'tom buchanan'
},
{
type: 'submenu',
label: 'Others',
key: 'others',
value: 'others',
children: [
{
label: 'Chicken',
key: 'chicken'
value: 'chicken'
},
{
label: 'Beef',
key: 'beef'
value: 'beef'
}
]
}

37
demo/documentation/components/dropdown/enUS/index.md
View File

@ -16,24 +16,35 @@ manual-position
|Name|Type|Default|Description|
|-|-|-|-|
|size|`'small'\|'medium'\|'large'\|'huge'`|`large`||
|default-focus|`boolean`|`false`||
|options|`Array`|`[]`||
|trigger|`'hover' \| 'trigger' \| 'manual'`|`'hover'`||
|delay|`number`|`0`||
|duration|`number`|`300`||
|placement|`'top-start' \| 'top' \| 'top-end' \| 'right-start' \| 'right' \| 'right-end' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'left-start' \| 'left' \| 'left-end' \| `|`'bottom'`||
|arrow|`boolean`|`false`||
|disabled|`boolean`|`false`||
|manually-positioned|`boolean`|`false`||
|x|`number`|`null`||
|y|`number`|`null`||
|filp|`boolean`|`true`||
|controller|`object`|`null`||
|keyboard|`boolean`|`true`|Whether is supports keyboard operation. (Be careful about the potential conflicts with other components keyboard operations)|
|submenu-width|`number`|`null`||
|submenu-min-width|`number`|`null`||
For other props, see [Popover Props](n-popover#Props). Note that `arrow`, `raw` is not available.
### DropdownOption Type
|Property|Type|Description|
|-|-|-|
|label|`string`||
|value|`string \| number`|Should be unique|
### DropdownDivider Type
|Property|Type|Description|
|-|-|-|
|type|`'divider'`||
### DropdownSubmenu Type
|Property|Type|Description|
|-|-|-|
|label|`string`||
|value|`string \| number`|Should be unique|
|children|`Array<DropdownOption \| DropdownDivider \| DropdownSubmenu>`||
## Events
|Name|Parameters|Description|
|-|-|-|
|select|`(selectedKey: string \| number)`||
|select|`(selectedValue: string \| number)`||

20
demo/documentation/components/dropdown/enUS/manualPosition.md
View File

@ -20,44 +20,42 @@ For some special case, you may want to manually position the dropdown. For examp
const options = [
{
label: 'Jay Gatsby',
key: 'jay gatsby'
value: 'jay gatsby'
},
{
label: 'Daisy Buchanan',
key: 'daisy buchanan'
value: 'daisy buchanan'
},
{
type: 'divider'
},
{
label: 'Nick Carraway',
key: 'nick carraway'
value: 'nick carraway'
},
{
type: 'submenu',
label: 'Others',
key: 'others',
value: 'others',
children: [
{
label: 'Jordan Baker',
key: 'jordan baker'
value: 'jordan baker'
},
{
label: 'Tom Buchanan',
key: 'tom buchanan'
value: 'tom buchanan'
},
{
type: 'submenu',
label: 'Others',
key: 'others',
value: 'others',
children: [
{
label: 'Chicken',
key: 'chicken'
value: 'chicken'
},
{
label: 'Beef',
key: 'beef'
value: 'beef'
}
]
}

12
demo/documentation/components/dropdown/enUS/placement.md
View File

@ -1,8 +1,8 @@
# Placement
Use different placement.
```html
<n-dropdown @select="handleSelect" placement="bottom-start" :focusable="false" :options="options">
<n-button>Money Force Us to Work Rather Than Sleep</n-button>
<n-dropdown @select="handleSelect" placement="bottom-start" :options="options">
<n-button :keyboard="false">Money Force Us to Work Rather Than Sleep</n-button>
</n-dropdown>
```
```js
@ -12,19 +12,19 @@ export default {
options: [
{
label: 'Marina Bay Sands',
key: 'Marina Bay Sands'
value: 'Marina Bay Sands'
},
{
label: 'Brown\'s Hotel, London',
key: 'Brown\'s Hotel, London'
value: 'Brown\'s Hotel, London'
},
{
label: 'Atlantis Bahamas, Nassau',
key: 'Atlantis Bahamas, Nassau'
value: 'Atlantis Bahamas, Nassau'
},
{
label: 'The Beverly Hills Hotel, Los Angeles',
key: 'The Beverly Hills Hotel, Los Angeles'
value: 'The Beverly Hills Hotel, Los Angeles'
}
]
}

32
demo/documentation/components/dropdown/enUS/size.md
View File

@ -7,83 +7,77 @@ Dropdown has different size.
size="small"
@select="handleSelect"
:options="options"
:focusable="false"
>
<n-button>Small Some</n-button>
<n-button :keyboard="false">Small Some</n-button>
</n-dropdown>
<n-dropdown
placement="bottom-start"
trigger="click"
size="medium"
@select="handleSelect"
:focusable="false"
:options="options"
>
<n-button>Medium Some</n-button>
<n-button :keyboard="false">Medium Some</n-button>
</n-dropdown>
<n-dropdown
placement="bottom-start"
trigger="click"
size="large"
:focusable="false"
@select="handleSelect"
:options="options"
>
<n-button>Large Some</n-button>
<n-button :keyboard="false">Large Some</n-button>
</n-dropdown>
<n-dropdown
placement="bottom-start"
trigger="click"
size="huge"
:focusable="false"
@select="handleSelect"
:options="options"
>
<n-button>Huge Some</n-button>
<n-button :keyboard="false">Huge Some</n-button>
</n-dropdown>
```
```js
const options = [
{
label: 'Jay Gatsby',
key: 'jay gatsby'
value: 'jay gatsby'
},
{
label: 'Daisy Buchanan',
key: 'daisy buchanan'
value: 'daisy buchanan'
},
{
type: 'divider'
},
{
label: 'Nick Carraway',
key: 'nick carraway'
value: 'nick carraway'
},
{
type: 'submenu',
label: 'Others',
key: 'others',
value: 'others',
children: [
{
label: 'Jordan Baker',
key: 'jordan baker'
value: 'jordan baker'
},
{
label: 'Tom Buchanan',
key: 'tom buchanan'
value: 'tom buchanan'
},
{
type: 'submenu',
label: 'Others',
key: 'others',
value: 'others',
children: [
{
label: 'Chicken',
key: 'chicken'
value: 'chicken'
},
{
label: 'Beef',
key: 'beef'
value: 'beef'
}
]
}

16
demo/documentation/components/dropdown/enUS/trigger.md
View File

@ -2,15 +2,15 @@
Different trigger of dropdown.
```html
<n-dropdown @select="handleSelect" trigger="hover" :options="options">
<n-button>Hover!</n-button>
<n-button :keyboard="false">Hover!</n-button>
</n-dropdown>
<n-dropdown @select="handleSelect" trigger="click" :focusable="false" :options="options">
<n-button>Click!</n-button>
<n-dropdown @select="handleSelect" trigger="click" :options="options">
<n-button :keyboard="false">Click!</n-button>
</n-dropdown>
<n-dropdown @select="handleSelect" trigger="manual" :show="showDropdown" :options="options">
<n-button @click="handleClick">Oh! Manually By Myself!</n-button>
<n-button :keyboard="false" @click="handleClick">Oh! Manually By Myself!</n-button>
</n-dropdown>
```
```js
@ -20,19 +20,19 @@ export default {
options: [
{
label: 'Marina Bay Sands',
key: 'Marina Bay Sands'
value: 'Marina Bay Sands'
},
{
label: 'Brown\'s Hotel, London',
key: 'Brown\'s Hotel, London'
value: 'Brown\'s Hotel, London'
},
{
label: 'Atlantis Bahamas, Nassau',
key: 'Atlantis Bahamas, Nassau'
value: 'Atlantis Bahamas, Nassau'
},
{
label: 'The Beverly Hills Hotel, Los Angeles',
key: 'The Beverly Hills Hotel, Los Angeles'
value: 'The Beverly Hills Hotel, Los Angeles'
}
],
showDropdown: false

24
demo/documentation/components/dropdown/enUS/width.md
View File

@ -1,5 +1,5 @@
# Width
`width`, `max-width`, `min-width`, `submenu-width`, `submenu-max-width`, `submenu-min-width` can be set.
`width`, `max-width`, `min-width`, `submenu-width`, `submenu-min-width` can be set.
```html
<n-dropdown
placement="bottom-start"
@ -9,51 +9,49 @@
:options="options"
@select="handleSelect"
>
<n-button>People and Some Food to Eat</n-button>
<n-button :keyboard="false">People and Some Food to Eat</n-button>
</n-dropdown>
```
```js
const options = [
{
label: 'Jay Gatsby',
key: 'jay gatsby'
value: 'jay gatsby'
},
{
label: 'Daisy Buchanan',
key: 'daisy buchanan'
value: 'daisy buchanan'
},
{
type: 'divider'
},
{
label: 'Nick Carraway',
key: 'nick carraway'
value: 'nick carraway'
},
{
type: 'submenu',
label: 'Others',
key: 'others',
value: 'others',
children: [
{
label: 'Jordan Baker',
key: 'jordan baker'
value: 'jordan baker'
},
{
label: 'Tom Buchanan',
key: 'tom buchanan'
value: 'tom buchanan'
},
{
type: 'submenu',
label: 'Others',
key: 'others',
value: 'others',
children: [
{
label: 'Chicken',
key: 'chicken'
value: 'chicken'
},
{
label: 'Beef',
key: 'beef'
value: 'beef'
}
]
}

12
demo/documentation/components/dropdown/zhCN/basic.md
View File

@ -1,8 +1,8 @@
# 基础用法
下拉菜单的基础用法。
```html
<n-dropdown @select="handleSelect" :focusable="false" :options="options">
<n-button>金钱所迫，起床工作</n-button>
<n-dropdown @select="handleSelect" :options="options">
<n-button :keyboard="false">金钱所迫，起床工作</n-button>
</n-dropdown>
```
```js
@ -12,19 +12,19 @@ export default {
options: [
{
label: '滨海湾金沙，新加坡',
key: 'marina bay sands'
value: 'marina bay sands'
},
{
label: '布朗酒店，伦敦',
key: 'brown\'s hotel, london'
value: 'brown\'s hotel, london'
},
{
label: '亚特兰蒂斯巴哈马，拿骚',
key: 'atlantis nahamas, nassau'
value: 'atlantis nahamas, nassau'
},
{
label: '比佛利山庄酒店，洛杉矶',
key: 'the beverly hills hotel, los angeles'
value: 'the beverly hills hotel, los angeles'
}
]
}

23
demo/documentation/components/dropdown/zhCN/cascade.md
View File

@ -5,10 +5,9 @@
:options="options"
placement="bottom-start"
trigger="click"
:default-focus="false"
@select="handleSelect"
>
<n-button>人物和食物</n-button>
<n-button :keyboard="false">人物和食物</n-button>
</n-dropdown>
```
@ -16,44 +15,42 @@
const options = [
{
label: '杰·盖茨比',
key: 'jay gatsby'
value: 'jay gatsby'
},
{
label: '黛西·布坎南',
key: 'daisy buchanan'
value: 'daisy buchanan'
},
{
type: 'divider'
},
{
label: '尼克·卡拉威',
key: 'nick carraway'
value: 'nick carraway'
},
{
type: 'submenu',
label: '其他',
key: 'others',
value: 'others',
children: [
{
label: '乔丹·贝克',
key: 'jordan baker'
value: 'jordan baker'
},
{
label: '汤姆·布坎南',
key: 'tom buchanan'
value: 'tom buchanan'
},
{
type: 'submenu',
label: '其他',
key: 'others',
value: 'others',
children: [
{
label: '鸡肉',
key: 'chicken'
value: 'chicken'
},
{
label: '牛肉',
key: 'beef'
value: 'beef'
}
]
}

40
demo/documentation/components/dropdown/zhCN/index.md
View File

@ -16,24 +16,36 @@ manual-position
|名称|类型|默认值|说明|
|-|-|-|-|
|size|`'small'\|'medium'\|'large'\|'huge'`|`large`||
|default-focus|`boolean`|`false`||
|options|`Array`|`[]`||
|trigger|`'hover' \| 'trigger' \| 'manual'`|`'hover'`||
|delay|`number`|`0`||
|duration|`number`|`300`||
|placement|`'top-start' \| 'top' \| 'top-end' \| 'right-start' \| 'right' \| 'right-end' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'left-start' \| 'left' \| 'left-end' \| `|`'bottom'`||
|arrow|`boolean`|`false`||
|disabled|`boolean`|`false`||
|manually-positioned|`boolean`|`false`||
|x|`number`|`null`||
|y|`number`|`null`||
|filp|`boolean`|`true`||
|controller|`object`|`null`||
|options|`Array<DropdownOption \| DropdownDivider \| DropdownSubmenu>`|`[]`||
|keyboard|`boolean`|`true`|是否支持键盘操作（注意和其他内容键盘操作可能的冲突）|
|submenu-width|`number`|`null`||
|submenu-min-width|`number`|`null`||
对于其他 Props，参考 [Popover Props](n-popover#Props)。注意 `arrow`, `raw` 属性不可用。
### DropdownOption Type
|属性|类型|说明|
|-|-|-|
|label|`string`||
|value|`string \| number`|需要唯一|
### DropdownDivider Type
|属性|类型|说明|
|-|-|-|
|type|`'divider'`||
### DropdownSubmenu Type
|属性|类型|说明|
|-|-|-|
|label|`string`||
|value|`string \| number`|需要唯一|
|children|`Array<DropdownOption \| DropdownDivider \| DropdownSubmenu>`||
## Events
|名称|参数|说明|
|-|-|-|
|select|`(selectedKey: string \| number)`||
|select|`(selectedValue: string \| number)`||

20
demo/documentation/components/dropdown/zhCN/manualPosition.md
View File

@ -20,44 +20,42 @@
const options = [
{
label: '杰·盖茨比',
key: 'jay gatsby'
value: 'jay gatsby'
},
{
label: '黛西·布坎南',
key: 'daisy buchanan'
value: 'daisy buchanan'
},
{
type: 'divider'
},
{
label: '尼克·卡拉威',
key: 'nick carraway'
value: 'nick carraway'
},
{
type: 'submenu',
label: '其他',
key: 'others',
value: 'others',
children: [
{
label: '乔丹·贝克',
key: 'jordan baker'
value: 'jordan baker'
},
{
label: '汤姆·布坎南',
key: 'tom buchanan'
value: 'tom buchanan'
},
{
type: 'submenu',
label: '其他',
key: 'others',
value: 'others',
children: [
{
label: '鸡肉',
key: 'chicken'
value: 'chicken'
},
{
label: '牛肉',
key: 'beef'
value: 'beef'
}
]
}

11
demo/documentation/components/dropdown/zhCN/placement.md
View File

@ -4,10 +4,9 @@
<n-dropdown
@select="handleSelect"
placement="bottom-start"
:focusable="false"
:options="options"
>
<n-button>金钱所迫，起床工作</n-button>
<n-button :keyboard="false">金钱所迫，起床工作</n-button>
</n-dropdown>
```
```js
@ -17,19 +16,19 @@ export default {
options: [
{
label: '滨海湾金沙，新加坡',
key: 'marina bay sands'
value: 'marina bay sands'
},
{
label: '布朗酒店，伦敦',
key: 'brown\'s hotel, london'
value: 'brown\'s hotel, london'
},
{
label: '亚特兰蒂斯巴哈马，拿骚',
key: 'atlantis nahamas, nassau'
value: 'atlantis nahamas, nassau'
},
{
label: '比佛利山庄酒店，洛杉矶',
key: 'the beverly hills hotel, los angeles'
value: 'the beverly hills hotel, los angeles'
}
]
}

32
demo/documentation/components/dropdown/zhCN/size.md
View File

@ -6,83 +6,77 @@
size="small"
@select="handleSelect"
:options="options"
:focusable="false"
>
<n-button>小号</n-button>
<n-button :keyboard="false">小号</n-button>
</n-dropdown>
<n-dropdown
placement="bottom-start"
trigger="click"
size="medium"
@select="handleSelect"
:focusable="false"
:options="options"
>
<n-button>中号</n-button>
<n-button :keyboard="false">中号</n-button>
</n-dropdown>
<n-dropdown
placement="bottom-start"
trigger="click"
size="large"
:focusable="false"
@select="handleSelect"
:options="options"
>
<n-button>大号</n-button>
<n-button :keyboard="false">大号</n-button>
</n-dropdown>
<n-dropdown
placement="bottom-start"
trigger="click"
size="large"
:focusable="false"
@select="handleSelect"
:options="options"
>
<n-button>巨大号</n-button>
<n-button :keyboard="false">巨大号</n-button>
</n-dropdown>
```
```js
const options = [
{
label: '杰·盖茨比',
key: 'jay gatsby'
value: 'jay gatsby'
},
{
label: '黛西·布坎南',
key: 'daisy buchanan'
value: 'daisy buchanan'
},
{
type: 'divider'
},
{
label: '尼克·卡拉威',
key: 'nick carraway'
value: 'nick carraway'
},
{
type: 'submenu',
label: '其他',
key: 'others',
value: 'others',
children: [
{
label: '乔丹·贝克',
key: 'jordan baker'
value: 'jordan baker'
},
{
label: '汤姆·布坎南',
key: 'tom buchanan'
value: 'tom buchanan'
},
{
type: 'submenu',
label: '其他',
key: 'others',
value: 'others',
children: [
{
label: '鸡肉',
key: 'chicken'
value: 'chicken'
},
{
label: '牛肉',
key: 'beef'
value: 'beef'
}
]
}

16
demo/documentation/components/dropdown/zhCN/trigger.md
View File

@ -1,15 +1,15 @@
# 触发
```html
<n-dropdown @select="handleSelect" trigger="hover" :options="options">
<n-button>悬浮！</n-button>
<n-button :keyboard="false">悬浮！</n-button>
</n-dropdown>
<n-dropdown @select="handleSelect" trigger="click" :focusable="false" :options="options">
<n-button>点击！</n-button>
<n-dropdown @select="handleSelect" trigger="click" :options="options">
<n-button :keyboard="false">点击！</n-button>
</n-dropdown>
<n-dropdown @select="handleSelect" trigger="manual" :show="showDropdown" :options="options">
<n-button @click="handleClick">噢！我要自己手动！</n-button>
<n-button :keyboard="false" @click="handleClick">噢！我要自己手动！</n-button>
</n-dropdown>
```
```js
@ -19,19 +19,19 @@ export default {
options: [
{
label: '滨海湾金沙，新加坡',
key: 'marina bay sands'
value: 'marina bay sands'
},
{
label: '布朗酒店，伦敦',
key: 'brown\'s hotel, london'
value: 'brown\'s hotel, london'
},
{
label: '亚特兰蒂斯巴哈马，拿骚',
key: 'atlantis nahamas, nassau'
value: 'atlantis nahamas, nassau'
},
{
label: '比佛利山庄酒店，洛杉矶',
key: 'the beverly hills hotel, los angeles'
value: 'the beverly hills hotel, los angeles'
}
],
showDropdown: false

25
demo/documentation/components/dropdown/zhCN/width.md
View File

@ -1,5 +1,5 @@
# 宽度
可以设置 `width`、`max-width`、`min-width`、`submenu-width`、`submenu-max-width`、`sub-min-width`。
可以设置 `width`、`max-width`、`min-width`、`submenu-width`、`sub-min-width`。
```html
<n-dropdown
:options="options"
@ -7,10 +7,9 @@
trigger="click"
:width="180"
:submenu-width="180"
:default-focus="false"
@select="handleSelect"
>
<n-button>人物和食物</n-button>
<n-button :keyboard="false">人物和食物</n-button>
</n-dropdown>
```
@ -18,44 +17,42 @@
const options = [
{
label: '杰·盖茨比',
key: 'jay gatsby'
value: 'jay gatsby'
},
{
label: '黛西·布坎南',
key: 'daisy buchanan'
value: 'daisy buchanan'
},
{
type: 'divider'
},
{
label: '尼克·卡拉威',
key: 'nick carraway'
value: 'nick carraway'
},
{
type: 'submenu',
label: '其他',
key: 'others',
value: 'others',
children: [
{
label: '乔丹·贝克',
key: 'jordan baker'
value: 'jordan baker'
},
{
label: '汤姆·布坎南',
key: 'tom buchanan'
value: 'tom buchanan'
},
{
type: 'submenu',
label: '其他',
key: 'others',
value: 'others',
children: [
{
label: '鸡肉',
key: 'chicken'
value: 'chicken'
},
{
label: '牛肉',
key: 'beef'
value: 'beef'
}
]
}

4
demo/documentation/components/element/enUS/basic.md
View File

@ -1,7 +1,7 @@
# Basic
When Config Provider provides dark theme, it applies `n-dark-theme` class on n-element. When Config Provider provides light theme, it applies `n-light-theme` class on it. If Neither, it won't apply any additional class on it. Just like other themed Naive UI components.
When `n-config-provider` provides dark theme, it applies `n-dark-theme` class on `n-element`. When `n-config-provider` provides light theme, it applies `n-light-theme` class on it. If neither, it won't apply any additional class on it. Just like other themed Naive UI components.
It is very helpful to create themed component.
It is very useful to create themed component.
```html
<n-element as="span" class="myel">

4
demo/documentation/components/element/enUS/index.md
View File

@ -1,5 +1,5 @@
# Element
Element can be render as a custom tag with the ability of accessing some configurations provided by n-config-provider.
Element can be render as a custom tag with the ability of accessing some configurations provided by `n-config-provider`.
## Demos
```demo
@ -9,7 +9,7 @@ color
## Props
|Name|Type|Default|Description|
|-|-|-|-|
|as|`string`|`'div'`||
|as|`string`|`'div'`|The tag `n-element` should be rendered as.|
## Slots
|Name|Parameters|Description|

2
demo/documentation/components/element/zhCN/basic.md
View File

@ -1,5 +1,5 @@
# 基础
当配置提供者提供深色主题时，它应用 `n-dark-theme` class。当配置提供者提供浅色主题时，它应用 `n-light-theme` class。若非二者之一，它不会应用额外的 class，正如其他特定主题的 Naive UI 组件。
当配置提供者提供深色主题时，它上面会有 `n-dark-theme` 类。当配置提供者提供浅色主题时，它上面会有 `n-light-theme` 类。若非二者之一，它不会添加额外的类，这种行为和其他的 Naive UI 组件类似。
创建特定主题的组件十分管用。

4
demo/documentation/components/element/zhCN/index.md
View File

@ -1,5 +1,5 @@
# 元素 Element
Element 可以被渲染成各种标签同事还可以获得某些 Config Provider 提供的配置。
Element 可以被渲染成各种标签同时还可以获得某些 `n-config-provider` 提供的配置。
## 演示
```demo
@ -10,7 +10,7 @@ color
## Props
|名称|类型|默认值|说明|
|-|-|-|-|
|as|`string`|`'div'`||
|as|`string`|`'div'`|`n-element` 需要渲染为什么元素|
## Slots
|名称|参数|说明|

5
demo/documentation/components/gradientText/enUS/index.md
View File

@ -12,9 +12,10 @@ custom
## Props
|Name|Type|Default|Description|
|-|-|-|-|
|type|`'default' \| 'info' \| 'success' \| 'warning' \| 'error'`||**required**|
|theme|`'light' \| 'dark'`|`null`||
|type|`'primary' \| 'info' \| 'success' \| 'warning' \| 'error'`|`'primary'`||
|size|`number \| string`|`null`||
|gradient|`string \| object`|`null`||
|gradient|`string \| { from: string, to: string, deg: number \| string }`|`null`||
## Slots
|Name|Parameters|Description|

5
demo/documentation/components/gradientText/zhCN/index.md
View File

@ -11,9 +11,10 @@ custom
## Props
|名称|类型|默认值|说明|
|-|-|-|-|
|type|`'default' \| 'info' \| 'success' \| 'warning' \| 'error'`||**必需**|
|theme|`'light' \| 'dark'`|`null`||
|type|`'primary' \| 'info' \| 'success' \| 'warning' \| 'error'`|`'primary'`||
|size|`number \| string`|`null`||
|gradient|`string \| object`|`null`||
|gradient|`string \| { from: string, to: string, deg: number \| string }`|`null`||
## Slots
|名称|参数|说明|

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

@ -1,6 +1,6 @@
# Basic
```html
<n-row :gutter="12">
<n-row gutter="12">
<n-col :span="6">
<div class="red"></div>
</n-col>

12
demo/documentation/components/grid/enUS/index.md
View File

@ -13,19 +13,19 @@ push-pull
### Row Props
|Name|Type|Default|Description|
|-|-|-|-|
|gutter|`number \| Array`| `0` | `horizontal gutter` or `[horizontal gutter, vertical gutter]`|
|gutter|`number \| string \| [number, number] \| [string, string]`| `0` | `horizontal gutter` or `[horizontal gutter, vertical gutter]`|
### Col Props
|Name|Type|Default|Description|
|-|-|-|-|
|span|`number`|1||
|offset|`number`|0||
|push|`number`|0||
|pull|`number`|0||
|span|`number`|`1`||
|offset|`number`|`0`||
|push|`number`|`0`||
|pull|`number`|`0`||
## Notes
The grid is not responsive, for I have not enough time, ha...
However, I think it is wired that when grid is responsive but nearly all other components are not responsive. It is not a good idea to put all responsibility to a ui-framework for building a responsive layout.
Developers always say that no silver bullet. I agree with it. So far as I know, nothing can make you write code once without handling any corner case of the whole compilicate user interface. I don't always try to find a perfect way to solving a problem: If **thing is complicate itself** (after your carefully thinking), accepting it (and start to solving it case by case) would always be a nice way.
Developers always say that there's no silver bullet. I agree with it. So far as I know, nothing is able to make you write code once without handling any corner case of the whole compilicated user interface. I don't always try to find a perfect way to solve a problem: If you find **the thing itself is complicated** (after carefully thinking), accepting it (and start to solving it case by case) could be a viable way.

2
demo/documentation/components/grid/zhCN/basic.md
View File

@ -1,6 +1,6 @@
# 基础用法
```html
<n-row :gutter="12">
<n-row gutter="12">
<n-col :span="6">
<div class="red"></div>
</n-col>

14
demo/documentation/components/grid/zhCN/index.md
View File

@ -14,19 +14,19 @@ push-pull
### Row Props
|名称|类型|默认值|说明|
|-|-|-|-|
|gutter|`number \| Array`| `0` | `水平间隔` or `[水平间隔, 垂直间隔]`|
|gutter|`number \| string \| [number, number] \| [string, string]`| `0` | `水平间隔` 或者 `[水平间隔, 垂直间隔]`|
### Col Props
|名称|类型|默认值|说明|
|-|-|-|-|
|span|`number`|1||
|offset|`number`|0||
|push|`number`|0||
|pull|`number`|0||
|span|`number`|`1`||
|offset|`number`|`0`||
|push|`number`|`0`||
|pull|`number`|`0`||
## 备注
栅格不是响应式的，因为不太有时间写，额...
但是，在一个几乎所有组件都是非响应式的库里面，栅格却是响应式的其实有那么点奇怪。把所有需要做响应式适配的工作都交给组件库不是件很合理的事。
但是，在一个几乎所有组件都是非响应式的库里面，栅格却是响应式的其实有那么点奇怪。把所有需要做响应式适配的工作都交给组件库不是很合理的事。
开发者常说，没有银弹。我十分认同，就我所知，目前还没什么东西能让人在不处理任何边界情况的状况下一次性写好复杂的用户界面。我并不总试图寻找一种完美的解决方案：如果**问题本身是复杂的**（在你仔细思考后得出了这个结论），那接受它（然后针对不同的状况开始写不同的解决方案）应该是一种不错的方法。
开发者常说，没有银弹。我对此认同，就我所知，目前还没什么东西能让人在不处理任何边界情况的状况下一次性写好复杂的用户界面。我并不总想着一定要一种完美的解决方案：如果**问题本身是复杂的**（在你仔细思考后得出了这个结论），那接受它（然后针对不同的状况开始写不同的解决方案）应该是一种说得过去的方法。

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

@ -16,7 +16,8 @@ depth
## Props
|Name|Type|Default|Description|
|-|-|-|-|
|themed-style|`object`|`null`||
|theme|`'light' \| 'dark'`|`null`||
|themed-style|`{ [themeName: string]: object }`|`null`||
|size|`number \| string`|`null`||
|color|`string`|`null`||
|depth|`'primary' \| 'secondary' \| 'tertiary'`|`null`||

3
demo/documentation/components/icon/zhCN/index.md
View File

@ -15,7 +15,8 @@ depth
## Props
|名称|类型|默认值|说明|
|-|-|-|-|
|themed-style|`object`|`null`||
|theme|`'light' \| 'dark'`|`null`||
|themed-style|`{ [themeName: string]: object }`|`null`||
|size|`number \| string`|`null`||
|color|`string`|`null`||
|depth|`'primary' \| 'secondary' \| 'tertiary'`|`null`||

2
demo/documentation/components/input/enUS/inputGroup.md
View File

@ -18,7 +18,7 @@
<n-input-group>
<n-button type="primary">Search</n-button>
<n-input :style="{ width: '50%' }" v-model="value8" />
<n-button>Search</n-button>
<n-button type="primary" ghost>Search</n-button>
</n-input-group>
<n-input-group>
<n-date-picker v-model="value9"/>

2
demo/documentation/components/input/zhCN/inputGroup.md
View File

@ -18,7 +18,7 @@
<n-input-group>
<n-button type="primary">搜索</n-button>
<n-input :style="{ width: '50%' }" v-model="value8" />
<n-button>搜索</n-button>
<n-button type="primary" ghost>搜索</n-button>
</n-input-group>
<n-input-group>
<n-date-picker v-model="value9"/>

14
demo/documentation/components/layout/enUS/absolute.md
View File

@ -1,25 +1,25 @@
# Absolute
# Absolute Position
All layout components can use absolute positioning. It can be used when you want content scrolling inside fixed area.
<n-alert title="Caveat" type="warning">If you have set mode=`'absolute'` on sider and want the sider and its adjacent layout or layout-content to display in right manner, you should apply mode=`'absolute'` on layout or layout-content too.</n-alert>
<n-alert title="Caveat" type="warning">If you have set `position='absolute'` on sider and want the sider and its adjacent `n-layout` or `n-layout-content` to display in right manner, you should apply `mode='absolute'` on layout or layout-content too.</n-alert>
```html
<div style="width: 100%; height: 240px; position: relative">
<n-layout mode="absolute">
<n-layout position="absolute">
<n-layout-header style="height: 64px;">
Cool Header
</n-layout-header>
<n-layout mode="absolute" style="top: 64px; bottom: 64px;">
<n-layout-sider mode="absolute">
<n-layout position="absolute" style="top: 64px; bottom: 64px;">
<n-layout-sider position="absolute">
Cool Sider
</n-layout-sider>
<n-layout mode="absolute">
<n-layout position="absolute" style="overflow: auto;">
<n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
<n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
<n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
<n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
</n-layout>
</n-layout>
<n-layout-footer mode="absolute" style="height: 64px">
<n-layout-footer position="absolute" style="height: 64px">
Cool Footer
</n-layout-footer>
</n-layout>

16
demo/documentation/components/layout/enUS/collapse.md
View File

@ -13,14 +13,14 @@ Use `collapsed-width` and `width` to set sider's width.
<n-layout>
<n-layout-sider
collapse-mode="width"
:collapsed-width="48"
:collapsed-width="120"
:width="240"
:collapsed="collapsed"
show-toggle-button
@collapse="collapsed = true"
@expand="collapsed = false"
>
Cool Sider
Cool Sider Cool Sider Cool Sider
</n-layout-sider>
<n-layout>
<n-layout-content>
@ -32,15 +32,15 @@ Use `collapsed-width` and `width` to set sider's width.
</n-layout>
</n-layout>
</n-layout>
<n-layout style="height: 240px;">
<n-layout-header mode="absolute" style="height: 64px;">
<n-layout style="height: 240px; overflow: hidden;">
<n-layout-header position="absolute" style="height: 64px;">
Cool Header
</n-layout-header>
<n-layout mode="absolute" style="top: 64px;">
<n-layout position="absolute" style="top: 64px;">
<n-layout-sider
mode="absolute"
position="absolute"
collapse-mode="transform"
:collapsed-width="48"
:collapsed-width="120"
:width="240"
:collapsed="collapsed"
show-toggle-button
@ -50,7 +50,7 @@ Use `collapsed-width` and `width` to set sider's width.
<n-h1>Sider</n-h1>
</n-layout-sider>
<n-layout
mode="absolute"
position="absolute"
>
<span>Content</span>
</n-layout>

8
demo/documentation/components/layout/enUS/debug.md
View File

@ -2,12 +2,12 @@
```html
<n-switch v-model="collapsed" />
<n-layout style="height: 480px;">
<n-layout-header mode="absolute" style="height: 64px;">
<n-layout-header position="absolute" style="height: 64px;">
Cool Header
</n-layout-header>
<n-layout mode="absolute" style="top: 64px;">
<n-layout position="absolute" style="top: 64px;">
<n-layout-sider
mode="absolute"
position="absolute"
:collapsed="collapsed"
show-toggle-button
@collapse="collapsed = true"
@ -15,7 +15,7 @@
>
<n-h1>Sider</n-h1>
</n-layout-sider>
<n-layout mode="absolute" :use-native-scrollbar="false">
<n-layout position="absolute" :use-native-scrollbar="false">
<n-layout-content>
<span>Content</span>
</n-layout-content>

30
demo/documentation/components/layout/enUS/index.md
View File

@ -1,6 +1,8 @@
# Layout
<!--single-column-->
Layout is for layout.
The component is a bit complicated to use. But like a manual gear car, it worths a shot.
## Demos
```demo
basic
@ -10,42 +12,56 @@ scrollbar
collapse
trigger-button
show-sider-content
scrollTo
```
## Props
### Layout, Layout Content Props
|Name|Type|Default|Description|
|-|-|-|-|
|use-native-scrollbar|`boolean`|`true`|Whether to use native scrollbar on itself. If set to `false`, layout will use a naive-ui style scrollbar for content|
|mode|`'default' \| 'absolute'`|`default`|`default` mode will make it css position set to `static`. `absolute` mode will make it css position set to `absolute` and `left`, `right`, `top`, `bottom` to `0`. `absolute` mode is very useful when you want to make content scroll in a fixed container or make the whole page's layout in a fixed position. You may need to change the style of the component to make it display as you expect.|
|position|`'static' \| 'absolute'`|`'static'`|`static` position will make it css position set to `static`. `absolute` position will make it css position set to `absolute` and `left`, `right`, `top`, `bottom` to `0`. `absolute` position is very useful when you want to make content scroll in a fixed container or make the whole page's layout in a fixed position. You may need to change the style of the component to make it display as you expect.|
### Layout Footer
### Layout Footer Props
|Name|Type|Default|Description|
|-|-|-|-|
|bordered|`boolean`|`false`||
|mode|`'default' \| 'absolute'`|`default`|`default` mode will make it css position set to `static`. `absolute` mode will make it css position set to `absolute` and `left`, `right`, `top` to `0`. `absolute` mode is very useful when you want to make content scroll in a fixed container or make the whole page's layout in a fixed position. You may need to change the style of the component to make it display as you expect.|
|position|`'static' \| 'absolute'`|`'static'`|`static` position will make it css position set to `static`. `absolute` position will make it css position set to `absolute` and `left`, `right`, `top` to `0`. `absolute` position is very useful when you want to make content scroll in a fixed container or make the whole page's layout in a fixed position. You may need to change the style of the component to make it display as you expect.|
### Layout Header Props
|Name|Type|Default|Description|
|-|-|-|-|
|bordered|`boolean`|`false`||
|mode|`'default' \| 'absolute'`|`default`|`default` mode will make it css position set to `static`. `absolute` mode will make it css position set to `absolute` and `left`, `right`, `bottom` to `0`. `absolute` mode is very useful when you want to make content scroll in a fixed container or make the whole page's layout in a fixed position. You may need to change the style of the component to ma ke as you expect.|
|position|`'static' \| 'absolute'`|`'static'`|`static` position will make it css position set to `static`. `absolute` position will make it css position set to `absolute` and `left`, `right`, `bottom` to `0`. `absolute` position is very useful when you want to make content scroll in a fixed container or make the whole page's layout in a fixed position. You may need to change the style of the component to ma ke as you expect.|
### Layout Sider Props
|Name|Type|Default|Description|
|-|-|-|-|
|bordered|`boolean`|`false`||
|mode|`'default' \| 'absolute'`|`default`|`default` mode will make it css position set to `static`. `absolute` mode will make it css position set to `absolute` and `left`, `top`, `bottom` to `0`. `absolute` mode is very useful when you want to make content scroll in a fixed container or make the whole page's layout in a fixed position. You may need to change the style of the component to make it as you expect.**Make sure its adjacent n-layout or n-layout-content mode set to `'absolute'` when its mode is `'absolute'`.**|
|position|`'static' \| 'absolute'`|`'static'`|`static` position will make it css position set to `static`. `absolute` position will make it css position set to `absolute` and `left`, `top`, `bottom` to `0`. `absolute` position is very useful when you want to make content scroll in a fixed container or make the whole page's layout in a fixed position. You may need to change the style of the component to make it as you expect. Make sure its adjacent n-layout or n-layout-content position set to `'absolute'` when its position is `'absolute'`.|
|collapsed-width|`number`|`48`||
|width|`number`|`272`||
|collapse-mode|`'transform' \| 'width'`|`'transform'`|If set to `'width'`, the sider's content width will be actually collapsed. If set to `'transform'`, the sider will only move it's position and won't change its content width. `'transform'` collapse mode only work with sider in `'absolute'` mode.|
|collapse-mode|`'transform' \| 'width'`|`'transform'`|If set to `'width'`, the sider's content width will be actually collapsed. If set to `'transform'`, the sider will only move it's position and won't change its content width. `'transform'` collapse mode only work with sider in `'absolute'` position.|
|collapsed|`boolean`|`false`||
|use-native-scrollbar|`boolean`|`true`|Whether to use native scrollbar on itself. If set to `false`, sider will use a naive-ui style scrollbar for content|
|show-content|`boolean`|`true`|If set to `false`, sider content will be invisible.|
|show-trigger|`boolean`|`false`|Whether to show the built-in trigger button on sider.|
## Slots
### Layout, Layout Content, Layout Sider, Layout Header, Layout Footer Slots
|Name|Parameters|Description|
|-|-|-|
|default|`()`||
## Events
### Layout Sider Events
|Name|Parameters|Description|
|-|-|-|
|expand|`()`||
|collapse|`()`||
|collapse|`()`||
## Methods
### Layout, Layout Content, Layout Sider Methods
|Name|Type|Description|
|-|-|-|
|scrollTo|`((xCoord: number, yCoord: number) => void) \| ({ left?: number, top?: number, behavior: 'smooth' \| 'auto' }) => void`|Scroll to somewhere.|

40
demo/documentation/components/layout/enUS/scrollTo.md Normal file
View File

@ -0,0 +1,40 @@
# Scroll To
```html
<n-button
@click="$refs.sider.scrollTo({ top: 120, behavior: 'smooth' })"
>
Sider Scroll to 120px
</n-button>
<n-button
@click="$refs.content.scrollTo({ top: 120, behavior: 'smooth' })"
>
Content Scroll to 120px
</n-button>
<n-layout style="height: 480px;">
<n-layout-header style="height: 64px;">
Cool Header
</n-layout-header>
<n-layout position="absolute" style="top: 64px; bottom: 64px;">
<n-layout-sider position="absolute" ref="sider" style="overflow: auto;">
<n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
<n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
<n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
<n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
</n-layout-sider>
<n-layout position="absolute" :use-native-scrollbar="false" ref="content">
<n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
<n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
<n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
<n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
</n-layout>
</n-layout>
<n-layout-footer position="absolute" style="height: 64px">
Cool Footer
</n-layout-footer>
</n-layout>
```
```css
.n-button {
margin: 0 8px 12px 0;
}
```

15
demo/documentation/components/layout/enUS/scrollbar.md
View File

@ -1,22 +1,25 @@
# Use Built-in Scrollbar
Sometimes you will find native scrollbar doesn't meet the style of naive-ui. You can use built-in scrollbar of naive-ui (on sider, layout or content).
Sometimes you will find native scrollbar doesn't meet the style of naive-ui. You can use built-in scrollbar of naive-ui (on `n-layout-sider`, `n-layout` or `n-content`).
```html
<n-layout style="height: 480px;">
<n-layout-header style="height: 64px;">
Cool Header
</n-layout-header>
<n-layout mode="absolute" style="top: 64px; bottom: 64px;">
<n-layout-sider mode="absolute" :use-native-scrollbar="false">
Cool Sider
<n-layout position="absolute" style="top: 64px; bottom: 64px;">
<n-layout-sider position="absolute" :use-native-scrollbar="false">
<n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
<n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
<n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
<n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
</n-layout-sider>
<n-layout mode="absolute" :use-native-scrollbar="false">
<n-layout position="absolute" :use-native-scrollbar="false">
<n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
<n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
<n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
<n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
</n-layout>
</n-layout>
<n-layout-footer mode="absolute" style="height: 64px">
<n-layout-footer position="absolute" style="height: 64px">
Cool Footer
</n-layout-footer>
</n-layout>

12
demo/documentation/components/layout/enUS/showSiderContent.md
View File

@ -29,13 +29,13 @@ Sometimes you don't want to see content inside sider after it's collapsed.
</n-layout>
</n-layout>
</n-layout>
<n-layout style="height: 240px;">
<n-layout-header mode="absolute" style="height: 64px;">
<n-layout style="height: 240px; overflow: hidden;">
<n-layout-header position="absolute" style="height: 64px;">
Cool Header
</n-layout-header>
<n-layout mode="absolute" style="top: 64px;">
<n-layout position="absolute" style="top: 64px;">
<n-layout-sider
mode="absolute"
position="absolute"
collapse-mode="transform"
:show-content="!collapsed"
:collapsed-width="120"
@ -45,10 +45,10 @@ Sometimes you don't want to see content inside sider after it's collapsed.
@collapse="collapsed = true"
@expand="collapsed = false"
>
<n-h1>Sider</n-h1>
<n-h1>Sider Sider Sider</n-h1>
</n-layout-sider>
<n-layout
mode="absolute"
position="absolute"
>
<span>Content</span>
</n-layout>

10
demo/documentation/components/layout/enUS/triggerButton.md
View File

@ -28,13 +28,13 @@ A trigger button, for free.
</n-layout>
</n-layout>
</n-layout>
<n-layout style="height: 240px;">
<n-layout-header mode="absolute" style="height: 64px;">
<n-layout style="height: 240px; overflow: hidden;">
<n-layout-header position="absolute" style="height: 64px;">
Cool Header
</n-layout-header>
<n-layout mode="absolute" style="top: 64px;">
<n-layout position="absolute" style="top: 64px;">
<n-layout-sider
mode="absolute"
position="absolute"
show-trigger
collapse-mode="transform"
:collapsed-width="120"
@ -46,7 +46,7 @@ A trigger button, for free.
<n-h1>Sider</n-h1>
</n-layout-sider>
<n-layout
mode="absolute"
position="absolute"
style="padding: 24px;"
>
<n-layout-content>

14
demo/documentation/components/layout/zhCN/absolute.md
View File

@ -1,25 +1,25 @@
# 绝对定位模式
所有布局组件可以使用 Absolute 定位。如果你期望内容在固定的区域内滚动，可以使用 `absolute` 模式。
所有布局组件可以使用绝对定位。如果你期望内容在固定的区域内滚动，可以使用 `absolute` 模式。
<n-alert title="注意" type="warning">如果你在 Sider 上设定了 mode=`'absolute'`，那么为了旁边的 Layout 和 Layout Content 正常显示，他们也要被设定为 mode=`'absolute'`</n-alert>
<n-alert title="注意" type="warning">如果你在边栏上设定了 `position='absolute'`，那么为了旁边的 `n-layout` 和 `n-layout-content` 正常显示，他们也要被设定为 `position='absolute'`</n-alert>
```html
<div style="width: 100%; height: 240px; position: relative">
<n-layout mode="absolute">
<n-layout position="absolute">
<n-layout-header style="height: 64px;">
酷的页头
</n-layout-header>
<n-layout mode="absolute" style="top: 64px; bottom: 64px;">
<n-layout-sider mode="absolute">
<n-layout position="absolute" style="top: 64px; bottom: 64px;">
<n-layout-sider position="absolute">
酷的边栏
</n-layout-sider>
<n-layout mode="absolute">
<n-layout position="absolute" style="overflow: auto;">
<n-h1>长</n-h1><n-h1>长</n-h1><n-h1>长</n-h1>
<n-h1>长</n-h1><n-h1>长</n-h1><n-h1>长</n-h1>
<n-h1>长</n-h1><n-h1>长</n-h1><n-h1>长</n-h1>
<n-h1>长</n-h1><n-h1>长</n-h1><n-h1>长</n-h1>
</n-layout>
</n-layout>
<n-layout-footer mode="absolute" style="height: 64px">
<n-layout-footer position="absolute" style="height: 64px">
酷的页脚
</n-layout-footer>
</n-layout>

12
demo/documentation/components/layout/zhCN/collapse.md
View File

@ -1,7 +1,7 @@
# 折叠侧边栏
使用 `collapsed` 属性控制侧边栏状态。
侧边栏有两种 `collapse-mode`：`width`、`transform`。`width` 会改变侧边栏的宽度，而 `transform` 只是将侧边栏移除布局。
侧边栏有两种 `collapse-mode`：`width` 和 `transform`。`width` 会改变侧边栏的宽度，而 `transform` 只是将侧边栏挪出布局。
使用 `collapsed-width` 和 `width` 设置侧边栏的宽度。
```html
@ -32,13 +32,13 @@
</n-layout>
</n-layout>
</n-layout>
<n-layout style="height: 240px;">
<n-layout-header mode="absolute" style="height: 64px;">
<n-layout style="height: 240px; overflow: hidden;">
<n-layout-header position="absolute" style="height: 64px;">
酷的页头
</n-layout-header>
<n-layout mode="absolute" style="top: 64px;">
<n-layout position="absolute" style="top: 64px;">
<n-layout-sider
mode="absolute"
position="absolute"
collapse-mode="transform"
:collapsed-width="120"
:width="240"
@ -50,7 +50,7 @@
<n-h1>边栏</n-h1>
</n-layout-sider>
<n-layout
mode="absolute"
position="absolute"
>
<span>内容</span>
</n-layout>

8
demo/documentation/components/layout/zhCN/debug.md
View File

@ -2,12 +2,12 @@
```html
<n-switch v-model="collapsed" />
<n-layout style="height: 480px;">
<n-layout-header mode="absolute" style="height: 64px;">
<n-layout-header position="absolute" style="height: 64px;">
Cool Header
</n-layout-header>
<n-layout mode="absolute" style="top: 64px;">
<n-layout position="absolute" style="top: 64px;">
<n-layout-sider
mode="absolute"
position="absolute"
:collapsed="collapsed"
show-toggle-button
@collapse="collapsed = true"
@ -15,7 +15,7 @@
>
<n-h1>Sider</n-h1>
</n-layout-sider>
<n-layout mode="absolute" :use-native-scrollbar="false">
<n-layout position="absolute" :use-native-scrollbar="false">
<n-layout-content>
<span>Content</span>
</n-layout-content>

33
demo/documentation/components/layout/zhCN/index.md
View File

@ -1,5 +1,7 @@
# 布局 Layout
布局是用来布局的。
这个组件用起来有点麻烦，但是就像手动挡的车，还是值得一试的。
<!--single-column-->
## 演示
```demo
@ -10,42 +12,59 @@ scrollbar
collapse
trigger-button
show-sider-content
scrollTo
```
## Props
### Layout, Layout Content Props
|名称|类型|默认值|说明|
|-|-|-|-|
|theme|`'light' \| 'dark'`|`null`||
|use-native-scrollbar|`boolean`|`true`|是否在自身使用原生滚动条。如果设定为 `false`, Layout 将会对内容使用 naive-ui 风格的滚动条|
|mode|`'default' \| 'absolute'`|`default`|`default` 模式将会把 CSS `position` 设为 `static`. `absolute` 模式将会把 CSS `position` 设为 `absolute`，还将 `left`、`right`、`top`、`bottom` 设为 `0`。`absolute` 模式在你想将内容在一个固定容器或者将这个页面的布局设为固定位置的时候很有用。你可能需要修改一些 style 来确保它按照你预想的方式展示|
|position|`'static' \| 'absolute'`|`'static'`|`static` 模式将会把 CSS `position` 设为 `static`， `absolute` 模式将会把 CSS `position` 设为 `absolute`，还将 `left`、`right`、`top`、`bottom` 设为 `0`。`absolute` 模式在你想将内容在一个固定容器或者将这个页面的布局设为固定位置的时候很有用。你可能需要修改一些 style 来确保它按照你预想的方式展示|
### Layout Footer
### Layout Footer Props
|名称|类型|默认值|说明|
|-|-|-|-|
|theme|`'light' \| 'dark'`|`null`||
|bordered|`boolean`|`false`||
|mode|`'default' \| 'absolute'`|`default`|`default` 模式将会把 CSS `position` 设为 `static`. `absolute` 模式将会把 CSS `position` 设为 `absolute`，还将 `left`、`right`、`bottom` 设为 `0`。`absolute` 模式在你想将内容在一个固定容器或者将这个页面的布局设为固定位置的时候很有用。你可能需要修改一些 style 来确保它按照你预想的方式展示|
|position|`'static' \| 'absolute'`|`'static'`|`static` 模式将会把 CSS `position` 设为 `static`， `absolute` 模式将会把 CSS `position` 设为 `absolute`，还将 `left`、`right`、`bottom` 设为 `0`。`absolute` 模式在你想将内容在一个固定容器或者将这个页面的布局设为固定位置的时候很有用。你可能需要修改一些 style 来确保它按照你预想的方式展示|
### Layout Header Props
|名称|类型|默认值|说明|
|-|-|-|-|
|theme|`'light' \| 'dark'`|`null`||
|bordered|`boolean`|`false`||
|mode|`'default' \| 'absolute'`|`default`|`default` 模式将会把 CSS `position` 设为 `static`. `absolute` 模式将会把 CSS `position` 设为 `absolute`，还将 `left`、`right`、`top` 设为 `0`。`absolute` 模式在你想将内容在一个固定容器或者将这个页面的布局设为固定位置的时候很有用。你可能需要修改一些 style 来确保它按照你预想的方式展示|
|position|`'static' \| 'absolute'`|`'static'`|`static` 模式将会把 CSS `position` 设为 `static`， `absolute` 模式将会把 CSS `position` 设为 `absolute`，还将 `left`、`right`、`top` 设为 `0`。`absolute` 模式在你想将内容在一个固定容器或者将这个页面的布局设为固定位置的时候很有用。你可能需要修改一些 style 来确保它按照你预想的方式展示|
### Layout Sider Props
|名称|类型|默认值|说明|
|-|-|-|-|
|theme|`'light' \| 'dark'`|`null`||
|bordered|`boolean`|`false`||
|mode|`'default' \| 'absolute'`|`default`|`default` 模式将会把 CSS `position` 设为 `static`. `absolute` 模式将会把 CSS `position` 设为 `absolute`，还将 `left`、`top`、`bottom` 设为 `0`。`absolute` 模式在你想将内容在一个固定容器或者将这个页面的布局设为固定位置的时候很有用。你可能需要修改一些 style 来确保它按照你预想的方式展示。**当 Sider 的 mode 是 `absolute` 的时候，需要确保它旁边的 Layout 或者 Layout Content 的 mode 被设为 `absoulte`**|
|position|`'static' \| 'absolute'`|`'static'`|`static` 模式将会把 CSS `position` 设为 `static`， `absolute` 模式将会把 CSS `position` 设为 `absolute`，还将 `left`、`top`、`bottom` 设为 `0`。`absolute` 模式在你想将内容在一个固定容器或者将这个页面的布局设为固定位置的时候很有用。你可能需要修改一些 style 来确保它按照你预想的方式展示。当 Sider 的 position 是 `absolute` 的时候，需要确保它旁边的 Layout 或者 Layout Content 的 position 被设为 `absolute`|
|collapsed-width|`number`|`48`||
|width|`number`|`272`||
|collapse-mode|`'transform' \| 'width'`|`'transform'`|如果设定为 `'width'`，Sider 的内容宽度将会被实际改变；如果设定为 `'transform'`，边栏将只会移动它的位置而不会改变宽度。`'transform'` 的 collapse-mode 只适用于 `'absolute'` mode 的 Sider|
|collapse-mode|`'transform' \| 'width'`|`'transform'`|如果设定为 `'width'`，Sider 的内容宽度将会被实际改变；如果设定为 `'transform'`，边栏将只会移动它的位置而不会改变宽度。`'transform'` 的 collapse-mode 只适用于 `'absolute'` position 的 Sider|
|collapsed|`boolean`|`false`||
|use-native-scrollbar|`boolean`|`true`|是否在自身使用原生滚动条。如果设定为 `false`, Sider 将会对内容使用 naive-ui 风格的滚动条|
|show-content|`boolean`|`true`|如果设为 `false`，Sider 的内容将会变透明。|
|show-trigger|`boolean`|`false`|内置的触发按钮是否展示|
## Slots
### Layout, Layout Content, Layout Sider, Layout Header, Layout Footer Slots
|名称|参数|说明|
|-|-|-|
|default|`()`||
## Events
### Layout Sider Events
|名称|参数|说明|
|-|-|-|
|expand|`()`||
|collapse|`()`||
|collapse|`()`||
## Methods
### Layout, Layout Content, Layout Sider Methods
|名称|类型|说明|
|-|-|-|
|scrollTo|`((xCoord: number, yCoord: number) => void) \| ({ left?: number, top?: number, behavior: 'smooth' \| 'auto' }) => void`|滚动到某处|

40
demo/documentation/components/layout/zhCN/scrollTo.md Normal file
View File

@ -0,0 +1,40 @@
# 滚动到
```html
<n-button
@click="$refs.sider.scrollTo({ top: 120, behavior: 'smooth' })"
>
边栏滚到 120px
</n-button>
<n-button
@click="$refs.content.scrollTo({ top: 120, behavior: 'smooth' })"
>
内容滚到 120px
</n-button>
<n-layout style="height: 480px;">
<n-layout-header style="height: 64px;">
酷的页头
</n-layout-header>
<n-layout position="absolute" style="top: 64px; bottom: 64px;">
<n-layout-sider position="absolute" ref="sider" style="overflow: auto;">
<n-h1>长</n-h1><n-h1>长</n-h1><n-h1>长</n-h1>
<n-h1>长</n-h1><n-h1>长</n-h1><n-h1>长</n-h1>
<n-h1>长</n-h1><n-h1>长</n-h1><n-h1>长</n-h1>
<n-h1>长</n-h1><n-h1>长</n-h1><n-h1>长</n-h1>
</n-layout-sider>
<n-layout position="absolute" :use-native-scrollbar="false" ref="content">
<n-h1>长</n-h1><n-h1>长</n-h1><n-h1>长</n-h1>
<n-h1>长</n-h1><n-h1>长</n-h1><n-h1>长</n-h1>
<n-h1>长</n-h1><n-h1>长</n-h1><n-h1>长</n-h1>
<n-h1>长</n-h1><n-h1>长</n-h1><n-h1>长</n-h1>
</n-layout>
</n-layout>
<n-layout-footer position="absolute" style="height: 64px">
酷的页脚
</n-layout-footer>
</n-layout>
```
```css
.n-button {
margin: 0 8px 12px 0;
}
```

15
demo/documentation/components/layout/zhCN/scrollbar.md
View File

@ -1,22 +1,25 @@
# 使用内置滚动条
有时原生滚动条与 naive-ui 的样式不协调。可以（在 Sider、Layout 或 Layout Content）使用 naive-ui内置的滚动条。
有时原生滚动条与 naive-ui 的样式不协调。可以（在 `n-layout-sider`、`n-layout` 或 `n-layout-content`）使用 naive-ui 内置的滚动条。
```html
<n-layout style="height: 480px;">
<n-layout-header style="height: 64px;">
酷的页头
</n-layout-header>
<n-layout mode="absolute" style="top: 64px; bottom: 64px;">
<n-layout-sider mode="absolute" :use-native-scrollbar="false">
酷的边栏
<n-layout position="absolute" style="top: 64px; bottom: 64px;">
<n-layout-sider position="absolute" :use-native-scrollbar="false">
<n-h1>长</n-h1><n-h1>长</n-h1><n-h1>长</n-h1>
<n-h1>长</n-h1><n-h1>长</n-h1><n-h1>长</n-h1>
<n-h1>长</n-h1><n-h1>长</n-h1><n-h1>长</n-h1>
<n-h1>长</n-h1><n-h1>长</n-h1><n-h1>长</n-h1>
</n-layout-sider>
<n-layout mode="absolute" :use-native-scrollbar="false">
<n-layout position="absolute" :use-native-scrollbar="false">
<n-h1>长</n-h1><n-h1>长</n-h1><n-h1>长</n-h1>
<n-h1>长</n-h1><n-h1>长</n-h1><n-h1>长</n-h1>
<n-h1>长</n-h1><n-h1>长</n-h1><n-h1>长</n-h1>
<n-h1>长</n-h1><n-h1>长</n-h1><n-h1>长</n-h1>
</n-layout>
</n-layout>
<n-layout-footer mode="absolute" style="height: 64px">
<n-layout-footer position="absolute" style="height: 64px">
酷的页脚
</n-layout-footer>
</n-layout>

12
demo/documentation/components/layout/zhCN/showSiderContent.md
View File

@ -29,13 +29,13 @@
</n-layout>
</n-layout>
</n-layout>
<n-layout style="height: 240px;">
<n-layout-header mode="absolute" style="height: 64px;">
<n-layout style="height: 240px; overflow: hidden;">
<n-layout-header position="absolute" style="height: 64px;">
酷的页头
</n-layout-header>
<n-layout mode="absolute" style="top: 64px;">
<n-layout position="absolute" style="top: 64px;">
<n-layout-sider
mode="absolute"
position="absolute"
collapse-mode="transform"
:show-content="!collapsed"
:collapsed-width="120"
@ -45,10 +45,10 @@
@collapse="collapsed = true"
@expand="collapsed = false"
>
<n-h1>边栏</n-h1>
<n-h1>边栏 边栏 边栏</n-h1>
</n-layout-sider>
<n-layout
mode="absolute"
position="absolute"
>
<span>内容</span>
</n-layout>

10
demo/documentation/components/layout/zhCN/triggerButton.md
View File

@ -28,13 +28,13 @@
</n-layout>
</n-layout>
</n-layout>
<n-layout style="height: 240px;">
<n-layout-header mode="absolute" style="height: 64px;">
<n-layout style="height: 240px; overflow: hidden;">
<n-layout-header position="absolute" style="height: 64px;">
酷的页头
</n-layout-header>
<n-layout mode="absolute" style="top: 64px;">
<n-layout position="absolute" style="top: 64px;">
<n-layout-sider
mode="absolute"
position="absolute"
show-trigger
collapse-mode="transform"
:collapsed-width="120"
@ -46,7 +46,7 @@
<n-h1>边栏</n-h1>
</n-layout-sider>
<n-layout
mode="absolute"
position="absolute"
style="padding: 24px;"
>
<n-layout-content>

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

@ -2,7 +2,7 @@
```html
<n-popover>
<template v-slot:activator>
<n-button style="margin:0;">
<n-button>
Hover
</n-button>
</template>

39
demo/documentation/components/popover/enUS/controller.md Normal file
View File

@ -0,0 +1,39 @@
# Controller
Sometimes in a uncontrolled manner, you may want to control the display status of the popover.
You can pass a `controller` prop to obtain an object that controls the display status of the popover. `show` and `hide` methods will be added to the object.(The way probably looks wired but its related to its implementation)
```html
<n-button
@click="controller.show()"
style="margin-right: 8px;"
>
Show
</n-button>
<n-popover
placement="bottom"
trigger="click"
:controller="controller"
>
<template v-slot:activator>
<n-button>
Click
</n-button>
</template>
<span>
<n-button
@click="controller.hide()"
>
Hide
</n-button>
</span>
</n-popover>
```
```js
export default {
data () {
return {
controller: {}
}
}
}
```

2
demo/documentation/components/popover/enUS/delay.md
View File

@ -2,7 +2,7 @@
```html
<n-popover :delay="500" :duration="500" :width="240">
<template v-slot:activator>
<n-button style="margin:0;">
<n-button>
Delay 500, Duration 500
</n-button>
</template>

6
demo/documentation/components/popover/enUS/event.md
View File

@ -10,7 +10,7 @@
>
<template v-slot:activator>
<n-button>
California Girls(Hover)
Hover
</n-button>
</template>
<span>
@ -27,7 +27,7 @@
>
<template v-slot:activator>
<n-button>
California Girls(Click)
Click
</n-button>
</template>
<span>
@ -44,7 +44,7 @@
>
<template v-slot:activator>
<n-button @click="showPopover = !showPopover">
California Girls(Manual)
Manual
</n-button>
</template>
<span>

45
demo/documentation/components/popover/enUS/index.md
View File

@ -8,9 +8,10 @@ If you just want to display some basic text message, see [Tooltip](n-tooltip) in
```demo
basic
trigger
controller
delay
no-arrow
trigger
event
placement
raw-content
@ -21,23 +22,37 @@ manual-position
## Props
|Name|Type|Default|Description|
|-|-|-|-|
|theme|`'light' \| 'dark'`|`null`||
|trigger|`'hover' \| 'trigger' \| 'manual'`|`'hover'`||
|delay|`number`|`0`||
|duration|`number`|`300`||
|show|`boolean`|`false`|Whether to show popover when trigger is `manual`|
|delay|`number`|`0`|Popover showing delay when trigger is `hover`|
|duration|`number`|`300`|Popover vanish delay when trigger is `hover`|
|placement|`'top-start' \| 'top' \| 'top-end' \| 'right-start' \| 'right' \| 'right-end' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'left-start' \| 'left' \| 'left-end' \| `|`'bottom'`||
|show-arrow|`boolean`|`false`||
|raw|`boolean`|`false`||
|disabled|`boolean`|`false`||
|manuallyPositioned|`boolean`|`false`||
|x|`number`|`null`||
|y|`number`|`null`||
|filp|`boolean`|`true`||
|controller|`object`|`null`||
|show-arrow|`boolean`|`true`||
|raw|`boolean`|`false`|Whether to use no default styles.|
|disabled|`boolean`|`false`|Whether the popover can't be activated.|
|filp|`boolean`|`true`|Whether to filp the popover when there is no space for current placement.|
|controller|`object`|`null`|The controller object of `n-popover`. If a object is passed in, `show` and `hide` methods will be added to the object. The methods can controlled the display status of the popover when not `manual` triggered.|
|overlay-class|`string`|`null`||
|overlay-style|`object`|`null`||
|arrow-style|`object`|`null`||
|display-directive|`'if' \| 'show'`|`'if'`|The conditionally render directive to show popover content. `if` means using `v-if` to render content, `show` means using `v-show` to render content.|
|manually-positioned|`boolean`|`false`|Whether to manually position the popover.|
|x|`number`|`null`|The CSS `left` pixel value when popover manually positioned.|
|y|`number`|`null`|The CSS `top` pixel value when popover manually positioned.|
|width|`number \| string`|`null`||
|min-width|`number \| string`|`null`||
|max-width|`number \| string`|`null`||
## Slots
|Name|Parameters|Description|
|-|-|-|
|activator|`()`|The element or component that triggers popover.|
|default|`()`|The content inside popover.|
## Events
|Name|Parameters|
|-|-|
|show|`()`|
|hide|`()`|
|Name|Parameters|Description|
|-|-|-|
|show|`()`||
|hide|`()`||

1
demo/documentation/components/popover/enUS/manualPosition.md
View File

@ -1,4 +1,5 @@
# Manually Positioned
Click it.
```html
<div style="width: 200px; height: 200px; background-color: rgba(0, 128, 0, .5);" @click="handleClick"></div>
<n-popover trigger="manual" :show="showPopover" :x="x" :y="y" manually-positioned>

2
demo/documentation/components/popover/enUS/noArrow.md
View File

@ -2,7 +2,7 @@
```html
<n-popover :show-arrow="false">
<template v-slot:activator>
<n-button style="margin:0;">
<n-button>
Hover
</n-button>
</template>

2
demo/documentation/components/popover/enUS/rawContent.md
View File

@ -2,7 +2,7 @@
```html
<n-popover raw :show-arrow="false">
<template v-slot:activator>
<n-button style="margin:0;">
<n-button>
Hover
</n-button>
</template>

2
demo/documentation/components/popover/enUS/width.md
View File

@ -2,7 +2,7 @@
```html
<n-popover :width="500">
<template v-slot:activator>
<n-button style="margin:0;">
<n-button>
Width 500px
</n-button>
</template>

2
demo/documentation/components/popover/zhCN/basic.md
View File

@ -2,7 +2,7 @@
```html
<n-popover>
<template v-slot:activator>
<n-button style="margin:0;">
<n-button>
悬浮
</n-button>
</template>

39
demo/documentation/components/popover/zhCN/controller.md Normal file
View File

@ -0,0 +1,39 @@
# 控制器
有时在非受控状态下，你可能也想控制弹出信息的显示状态。
可以通过传入 `controller` 属性来获取一个能控制弹出信息的对象，这个对象上会被添加 `show` 和 `hide` 方法来允许你控制它的显示。（这种方式可能看起来很奇怪，但是这和实现方式有一些联系）
```html
<n-button
@click="controller.show()"
style="margin-right: 8px;"
>
打开
</n-button>
<n-popover
placement="bottom"
trigger="click"
:controller="controller"
>
<template v-slot:activator>
<n-button>
点击
</n-button>
</template>
<span>
<n-button
@click="controller.hide()"
>
关闭
</n-button>
</span>
</n-popover>
```
```js
export default {
data () {
return {
controller: {}
}
}
}
```

2
demo/documentation/components/popover/zhCN/delay.md
View File

@ -2,7 +2,7 @@
```html
<n-popover :delay="500" :duration="500" :width="240">
<template v-slot:activator>
<n-button style="margin:0;">
<n-button>
延迟 500ms, 持续 500ms
</n-button>
</template>

44
demo/documentation/components/popover/zhCN/index.md
View File

@ -8,9 +8,10 @@ Popover 在内容周围弹出一些隐藏的信息。Popover 里面没什么内
```demo
basic
trigger
controller
delay
no-arrow
trigger
event
placement
raw-content
@ -21,23 +22,36 @@ manual-position
## Props
|名称|类型|默认值|说明|
|-|-|-|-|
|theme|`'light' \| 'dark'`|`null`||
|trigger|`'hover' \| 'trigger' \| 'manual'`|`'hover'`||
|delay|`number`|`0`||
|duration|`number`|`300`||
|show|`boolean`|`false`|在 `manual` 触发时控制弹出信息是否显示|
|delay|`number`|`0`|悬浮触发弹出信息的延迟|
|duration|`number`|`300`|悬浮关闭弹出信息的延迟|
|placement|`'top-start' \| 'top' \| 'top-end' \| 'right-start' \| 'right' \| 'right-end' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'left-start' \| 'left' \| 'left-end' \| `|`'bottom'`||
|show-arrow|`boolean`|`false`||
|raw|`boolean`|`false`||
|disabled|`boolean`|`false`||
|manuallyPositioned|`boolean`|`false`||
|x|`number`|`null`||
|y|`number`|`null`||
|filp|`boolean`|`true`||
|controller|`object`|`null`||
|show-arrow|`boolean`|`true`||
|raw|`boolean`|`false`|是否不添加默认样式|
|disabled|`boolean`|`false`|是否不能激活弹出信息|
|filp|`boolean`|`true`|是否在当前放置方式不能提供足够空间的时候调整弹出信息的位置|
|controller|`object`|`null`|`n-popover` 的控制器对象。如果对象被传入了，那么它会被添加 `show`（展示弹出内容） 和 `hide`（隐藏弹出内容） 方法。这两个方法可以在非 `manual` 控制的时候来控制弹出信息的显示状态|
|overlay-class|`string`|`null`||
|overlay-style|`object`|`null`||
|arrow-style|`object`|`null`||
|display-directive|`'if' \| 'show'`|`'if'`|条件渲染使用的指令，`if` 会让内容被使用 `v-if` 渲染，`show` 会让内容被使用 `v-show` 渲染|
|manually-positioned|`boolean`|`false`|是否要手动控制位置|
|x|`number`|`null`|手动控制位置时填出内容的 CSS `left` 的像素值|
|y|`number`|`null`|手动控制位置时填出内容的 CSS `top` 的像素值||
|width|`number \| string`|`null`||
|min-width|`number \| string`|`null`||
|max-width|`number \| string`|`null`||
## Slots
|名称|参数|说明|
|-|-|-|
|activator|`()`|触发弹出信息的组件或元素|
|default|`()`|弹出的内容|
## Events
|名称|参数|
|-|-|
|show|`()`|
|hide|`()`|
|名称|参数|说明|
|-|-|-|
|show|`()`||
|hide|`()`||

1
demo/documentation/components/popover/zhCN/manualPosition.md
View File

@ -1,4 +1,5 @@
# 手动定位
点它
```html
<div style="width: 200px; height: 200px; background-color: rgba(0, 128, 0, .5);" @click="handleClick"></div>
<n-popover trigger="manual" :show="showPopover" :x="x" :y="y" manually-positioned>

2
demo/documentation/components/popover/zhCN/noArrow.md
View File

@ -2,7 +2,7 @@
```html
<n-popover :show-arrow="false">
<template v-slot:activator>
<n-button style="margin:0;">
<n-button>
悬浮
</n-button>
</template>

4
demo/documentation/components/progress/enUS/multipleCircle.md
View File

@ -1,7 +1,7 @@
# Multiple Circle
Maybe your PM will need this.
You can show multiple circle in a single progress. Note that `circle-gap` and `stroke-width` is relative to 100(the svg's viewbox size is 100).
Maybe your product manager will need it.
```html
<n-config-consumer>
<template v-slot="{ styleScheme }">

2
demo/documentation/components/spin/enUS/index.md
View File

@ -1,5 +1,5 @@
# Spin
It can be called loading, but why it's called loading? Because there is another private component will less props called loading.
It can be called loading, but why it's called loading? Because there is another internal component with less props called loading.
## Demos
```demo
basic

5
demo/documentation/components/tag/enUS/index.md
View File

@ -17,8 +17,9 @@ shape
## Props
|Name|Type|Default|Description|
|-|-|-|-|
|type|`'default' \| 'info' \| 'succcess' \| 'warning' \| 'error'`|`'default`||
|size|`'small' \| 'medium' \| 'large'`|`'medium`||
|theme|`'light' \| 'dark'`|`null`||
|type|`'default' \| 'info' \| 'succcess' \| 'warning' \| 'error'`|`'default'`||
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
|disabled|`boolean`|`false`||
|round|`boolean`|`false`||
|checkable|`boolean`|`false`||

5
demo/documentation/components/tag/zhCN/index.md
View File

@ -19,8 +19,9 @@ shape
## Props
|名称|类型|默认值|说明|
|-|-|-|-|
|type|`'default' \| 'info' \| 'succcess' \| 'warning' \| 'error'`|`'default`||
|size|`'small' \| 'medium' \| 'large'`|`'medium`||
|theme|`'light' \| 'dark'`|`null`||
|type|`'default' \| 'info' \| 'succcess' \| 'warning' \| 'error'`|`'default'`||
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
|disabled|`boolean`|`false`||
|round|`boolean`|`false`||
|checkable|`boolean`|`false`||

2
demo/documentation/components/timeline/zhCN/index.md
View File

@ -1,6 +1,6 @@
# Timeline 时间线
这个世界有两个纬度：时间、事件。
## 例子
## 演示
```demo
basic
size

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

@ -11,7 +11,10 @@ max-width
arrow
```
## Props
See [Popover](n-popover#Props)
See [Popover Props](n-popover#Props)
## Slots
See [Popover Slots](n-popover#Slots)
## Events
See [Popover](n-popover#Props)
See [Popover Events](n-popover#Events)

7
demo/documentation/components/tooltip/zhCN/index.md
View File

@ -11,7 +11,10 @@ max-width
arrow
```
## Props
参考 [Popover](n-popover#Props)
参考 [Popover Props](n-popover#Props)
## Slots
参考 [Popover Slots](n-popover#Slots)
## Events
参考 [Popover](n-popover#Props)
参考 [Popover Events](n-popover#Events)

2
demo/documentation/components/transfer/zhCN/index.md
View File

@ -1,7 +1,7 @@
# 穿梭框 Transfer
<!--single-column-->
左、右、左、右...像我这么无聊的人能玩一整天。
## 例子
## 演示
```demo
basic
large-data

11
demo/documentation/components/typography/enUS/index.md
View File

@ -2,7 +2,7 @@
Naive UI provides some basic styling for common HTML tags. It also provides some components to render text better.
Layout is a kind of art.
Typography is a kind of art.
## Demos
```demo
@ -13,6 +13,13 @@ text
## Props
## Props
### All Typography Components Props
|Name|Type|Default|Description|
|-|-|-|-|
|theme|`'light' \| 'dark'`|`null`||
### Text Props
|Name|Type|Default|Description|
|-|-|-|-|
@ -41,7 +48,7 @@ text
### A Props
|Name|Type|Default|Description|
|-|-|-|-|
|to|`string`|`null`|If the prop is set, it will be rendered as a Vue Router router-link component. Make sure you don't want to use href.|
|to|`string`|`null`|If the prop is set, it will be rendered as a Vue Router `router-link`s component. Make sure you don't want to use `href` attr.|
### Ul, Ol Props
|Name|Type|Default|Description|

12
demo/documentation/components/typography/zhCN/index.md
View File

@ -1,8 +1,8 @@
# 排版 Typography
# 排印 Typography
Naive UI 提供了常用 HTML 标签的一些基本样式，以及对文本渲染提供帮助的组件。
排版是一门艺术。
排印是一门艺术。
## 演示
```demo
@ -12,6 +12,12 @@ text
```
## Props
### 全部排版组件
|名称|类型|默认值|说明|
|-|-|-|-|
|theme|`'light' \| 'dark'`|`null`||
### Text Props
|名称|类型|默认值|说明|
|-|-|-|-|
@ -39,7 +45,7 @@ text
### A Props
|名称|类型|默认值|说明|
|-|-|-|-|
|to|`string`|`null`|如果设定了 to prop，a 会被渲染为一个 Vue Router 的 router-link 标签。确保你想用的不是 href|
|to|`string`|`null`|如果设定了 to prop，a 会被渲染为一个 Vue Router 的 `router-link` 标签。确保你想用的不是 href 属性|
### Ul, Ol Props
|名称|类型|默认值|说明|

2
demo/documentation/landing/index.vue
View File

@ -21,7 +21,7 @@
<n-config-consumer>
<template v-slot="{ styleScheme, theme }">
<div>
<n-layout-footer mode="absolute" style="z-index: auto;">
<n-layout-footer position="absolute" style="z-index: auto;">
<landing-footer style="max-width: 1200px; margin: auto;" />
</n-layout-footer>
<div class="banner">

2
demo/documentation/theme/enUS/element.md
View File

@ -1,5 +1,5 @@
# Use Naive Element
Naive UI has n-element component. See [Element](n-element).
Naive UI has `n-element` component. See [Element](n-element).
```html
<n-config-provider :theme="theme">
<div style="background-color: rgba(128, 128, 128); padding: 8px;">

4
demo/documentation/theme/enUS/index.md
View File

@ -1,6 +1,8 @@
# Create Themed Component
Naive UI provide some tools for developer to create themed components easier.
You may not want to use only the provided components and want to write themed components.
Naive UI provide some tools for developers to create themed components easier.
## Demos
```demo

2
demo/documentation/theme/enUS/provideTheme.md
View File

@ -1,5 +1,5 @@
# Provide Theme
Use Config Provider to set the theme of all its descedant components.
Use `n-config-providr` to set the theme of all its descedant components.
```html
<n-config-provider :theme="theme">

2
demo/documentation/theme/enUS/readTheme.md
View File

@ -1,5 +1,5 @@
# Get Theme
Use Config Consumer to get theme at current position.
Use `n-config-consumer` to get the theme at current position.
```html
<n-config-provider :theme="theme">

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