refactor(popover): support vue3

This commit is contained in:
07akioni 2020-09-10 14:18:02 +08:00
parent a7a37d995e
commit 2f4f5ca2b1
138 changed files with 925 additions and 1095 deletions

View File

@ -14,7 +14,7 @@ no-icon
|on-close|`() => boolean \| Promise<boolean> \| any`|`() => true`||
|on-after-hide|`Function`|`null`||
|show-icon|`boolean`|`true`||
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|themed-style|`{ [themeName: string]: Object } \| null`|`null`||
|title|`string`|`null`||
|type|`'default' \| 'info' \| 'success' \| 'warning' \| 'error'`|`'default'`||

View File

@ -14,7 +14,7 @@ no-icon
|on-close|`() => boolean \| Promise<boolean> \| any`|`() => true`||
|on-after-hide|`Function`|`null`||
|show-icon|`boolean`|`true`||
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|themed-style|`{ [themeName: string]: Object } \| null`|`null`||
|title|`string`|`null`||
|type|`'default' \| 'info' \| 'success' \| 'warning' \| 'error'`|`'default'`||

View File

@ -12,7 +12,7 @@ scrollto
## Props
|Name|Type|Default|Description|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|affix|`boolean`|`false`|If it works like a affix. If set to `true`, it will recieve props from [affix](n-affix#Props)|
|target|`() => HTMLElement`|A function that returns the nearest scrollable ascendant element|The element that anchor listens to scroll event. (If you want affix & anchor to listen to different target, manually warp anchor in affix instead.)|
|bound|`number`|`12`||

View File

@ -11,7 +11,7 @@ scrollto
## Props
|名称|类型|默认值|说明|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|affix|`boolean`|`false`|Anchor 是否像 Affix 一样展示,如果设定为 `true`,它还会接受 [Affix](n-affix#Props) 的 Props|
|target|`() => HTMLElement`|一个返回最邻近可滚动祖先元素的函数|需要监听滚动的元素(如果你希望 Anchor 和 Affix 分别监听不同的元素,可以手动的组合 Anchor 和 Affix|
|bound|`number`|`12`||

View File

@ -16,7 +16,7 @@ after-select
## Props
|Name|Type|Default|Description|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
|value|`string`|`null`||
|options|`Array<string \| AutoCompleteOption \| AutoCompleteOptionGroup>`|`[]`||

View File

@ -17,7 +17,7 @@ after-select
## Props
|名称|类型|默认值|说明|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
|value|`string`|`null`||
|options|`Array<string \| AutoCompleteOption \| AutoCompleteOptionGroup>`|`[]`||

View File

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

View File

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

View File

@ -14,7 +14,7 @@ target-container-selector
## Props
|Name|Type|Default|Description|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|target|`() => HTMLElement`|a function that returns the nearest scrollable ascendant element||
|right|`number \| string`|`40`||
|bottom|`number \| string`|`40`||

View File

@ -14,7 +14,7 @@ target-container-selector
## Props
|名称|类型|默认值|说明|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|target|`() => HTMLElement`|一个返回最邻近可滚动父级元素的函数||
|right|`number`|`40`||
|bottom|`number`|`40`||

View File

@ -14,7 +14,7 @@ raw
## Props
|Name|Type|Default|Description|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|themed-style|`{ [themeName: string]: Object } \| null`|`null`||
|value|`string \| number`|`null`||
|max|`number`|`null`||

View File

@ -14,7 +14,7 @@ raw
## Props
|名称|类型|默认值|说明|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|themed-style|`{ [themeName: string]: Object } \| null`|`null`||
|value|`string \| number`|`null`||
|max|`number`|`null`||

View File

@ -8,7 +8,7 @@ basic
### Breadcrumb Props
|Name|Type|Default|Description|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|separator|`string`|`'/'`||
## Slots

View File

@ -8,7 +8,7 @@ basic
### Breadcrumb Props
|名称|类型|默认值|说明|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|separator|`string`|`'/'`||
## Slots

View File

@ -30,7 +30,7 @@ group
|round|`boolean`|`false`||
|size|`'tiny' \| 'small' \| 'medium' \| 'large'`|`'medium'`||
|text|`boolean`|`false`||
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|type|`'default' \| 'primary' \| 'success' \| 'info' \| 'warning' \| 'error'`|`'default'`||
### Button Group Props

View File

@ -31,7 +31,7 @@ debug
|round|`boolean`|`false`||
|size|`'tiny' \| 'small' \| 'medium' \| 'large'`|`'medium'`||
|text|`boolean`|`false`||
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|type|`'default' \| 'primary' \| 'success' \| 'info' \| 'warning' \| 'error'`|`'default'`||
### Button Group Props

View File

@ -20,7 +20,7 @@ closable
|size|`'small' \| 'medium' \| 'large' \| 'huge'`|`'medium'`||
|bordered|`boolean`|`true`||
|closable|`boolean`|`false`||
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|themed-style|`{ [themeName: string]: Object } \| null`|`null`||
## Events

View File

@ -20,7 +20,7 @@ closable
|size|`'small' \| 'medium' \| 'large' \| 'huge'`|`'medium'`||
|bordered|`boolean`|`true`||
|closable|`boolean`|`false`||
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|themed-style|`{ [themeName: string]: Object } \| null`|`null`||
## Events

View File

@ -26,7 +26,7 @@ filter
## Props
|Name|Type|Default|Description|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|options|`Array<CascaderOption>`|`null`||
|value|`string \| number`|`null`||
|placeholder|`string`|`'Please Select'`||

View File

@ -27,7 +27,7 @@ filter
## Props
|名称|类型|默认值|说明|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|options|`Array<CascaderOption>`|`null`||
|value|`string \| number`|`null`||
|placeholder|`string`|`'请选择'`||

View File

@ -24,7 +24,7 @@ event
### Checkbox Props
|Name|Type|Default|Description|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|value|`string \| number`|`null`||
|checked|`boolean`|`false`||
|disabled|`boolean`|`false`||
@ -33,7 +33,7 @@ event
### Checkbox Group Props
|Name|Type|Default|Description|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|value|`Array<string \| number>`|`null`||
|disabled|`boolean`|`false`||

View File

@ -24,7 +24,7 @@ event
### Checkbox Props
|名称|类型|默认值|说明|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|value|`string \| number`|`null`||
|checked|`boolean`|`false`||
|disabled|`boolean`|`false`||
@ -33,7 +33,7 @@ event
### Checkbox Group Props
|名称|类型|默认值|说明|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|value|`Array<string \| number>`|`null`||
|disabled|`boolean`|`false`||

View File

@ -28,7 +28,7 @@ basic
## Props
|Name|Type|Default|Description|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|language|`string`|`null`||
|code|`string`|`null`||
|trim|`boolean`|`true`||

View File

@ -28,7 +28,7 @@ basic
## Props
|名称|类型|默认值|说明|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|language|`string`|`null`||
|code|`string`|`null`||
|trim|`boolean`|`true`||

View File

@ -22,7 +22,7 @@ item-header-click
|arrow-placement|`'left' \| 'right'`|`'left'`||
|display-directive|`'if' \| 'show'`|`'if'`|The display directive to use when its inner `n-collapse-item` render content. `'if'` corresponds to `v-if` and `'show'` corresponds to `v-show`.|
|expanded-names|`Array<string \| number>`|`null`||
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
### Collapse Item

View File

@ -22,7 +22,7 @@ item-header-click
|arrow-placement|`'left' \| 'right'`|`'left'`||
|display-directive|`'if' \| 'show'`|`'if'`|内部 `n-collapse-item` 在控制内容是否渲染时使用的指令,`'if'` 对应 `v-if``'show'` 对应 `v-show`|
|expanded-names|`Array<string \| number>`|`null`||
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
### Collapse Item Props

View File

@ -19,7 +19,7 @@ use-component
### ConfirmOption API
|Name|Type|Default|Description|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|type|`'error \| 'success' \| 'warning'`|`'warning'`||
|title|`string \| (() => VNode \| Array<VNode>)`|`null`|Can be a render function.|
|closable|`boolean`|`true`||

View File

@ -19,7 +19,7 @@ use-component
### ConfirmOption API
|名称|类型|默认值|说明|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|type|`'error \| 'success' \| 'warning'`|`'warning'`||
|title|`string \| (() => VNode \| Array<VNode>)`|`null`|可以是 render 函数|
|closable|`boolean`|`true`||

View File

@ -32,7 +32,7 @@ ajax-usage
## Props
|Name|Type|Default|Description|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|data|`Array<Object>`|`[]`|Data to display|
|columns|`Array<Column>`||Columns to display, **required**|
|max-height|`number \| string`|`null`|The max-height of the table. If content height is larger than it, the header will be fixed at top|

View File

@ -32,7 +32,7 @@ ajax-usage
## Props
|名称|类型|默认值|说明|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|data|`Array<Object>`|`[]`|需要展示的数据|
|columns|`Array<Column>`||需要展示的列,**必需**|
|max-height|`number \| string`|`null`|表格的最大高度,如果内容高度高于它,那么表头将固定|

View File

@ -26,7 +26,7 @@ format
|clearable|`boolean`|`false`||
|disabled|`boolean`|`false`||
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|type|`'date' \| 'datetime' \| 'daterange' \|'datetimerange'`|`'date`||
|value|`number`|`null`||

View File

@ -26,7 +26,7 @@ format
|clearable|`boolean`|`false`||
|disabled|`boolean`|`false`||
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|type|`'date' \| 'datetime' \| 'daterange' \|'datetimerange'`|`'date`||
|value|`number`|`null`||

View File

@ -16,7 +16,7 @@ size
### Descriptions Props
|Name|Type|Default|Description|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|title|`string`|`null`||
|column|`number`|`3`||
|label-placement|`'top' \| 'left'`|`'top`||

View File

@ -16,7 +16,7 @@ size
### Descriptions Props
|名称|类型|默认值|说明|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|title|`string`|`null`||
|column|`number`|`3`||
|label-placement|`'top' \| 'left'`|`'top`||

View File

@ -14,7 +14,7 @@ vertical
|title-placement|`'left' \| 'right' \| 'center'`|`'center'`||
|dashed|`boolean`|`false`||
|vertical|`boolean`|`false`||
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
## Slots
|Name|Parameters|Description|

View File

@ -12,7 +12,7 @@ vertical
|title-placement|`'left' \| 'right' \| 'center'`|`'center'`||
|dashed|`boolean`|`false`||
|vertical|`boolean`|`false`||
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
## Slots
|名称|参数|说明|

View File

@ -14,7 +14,7 @@ target
## Props
|Name|Parameters|Default|Description|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|themed-style|`{ [themeName: string]: Object } \| null`|`null`||
|show|`boolean`|`false`||
|placement|`'top' \| 'right' \| 'bottom' \| 'left'`|`'right'`||

View File

@ -18,7 +18,7 @@ dark-4-debug
## Props
|名称|类型|默认值|说明|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|themed-style|`{ [themeName: string]: Object } \| null`|`null`||
|show|`boolean`|`false`||
|placement|`'top' \| 'right' \| 'bottom' \| 'left'`|`'right'`||

View File

@ -7,7 +7,7 @@ basic
## Props
|Name|Type|Default|Description|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|size|`'small' \| 'medium' \| 'large' \| 'huge'`|`'medium'`||
|description|`string`|`'No Data'`||
|show-description|`boolean`|`true`||

View File

@ -7,7 +7,7 @@ basic
## Props
|名称|类型|默认值|说明|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|size|`'small' \| 'medium' \| 'large' \| 'huge'`|`'medium'`||
|description|`string`|`'无数据'`||
|show-description|`boolean`|`true`||

View File

@ -12,7 +12,7 @@ custom
## Props
|Name|Type|Default|Description|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|themed-style|`{ [themeName: string]: Object } \| null`|`null`||
|type|`'primary' \| 'info' \| 'success' \| 'warning' \| 'error'`|`'primary'`||
|size|`number \| string`|`null`||

View File

@ -11,7 +11,7 @@ custom
## Props
|名称|类型|默认值|说明|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|themed-style|`{ [themeName: string]: Object } \| null`|`null`||
|type|`'primary' \| 'info' \| 'success' \| 'warning' \| 'error'`|`'primary'`||
|size|`number \| string`|`null`||

View File

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

View File

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

View File

@ -18,7 +18,7 @@ validator
## Props
|Name|Type|Default|Description|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|value|`number`|`null`||
|step|`number`|`1`||
|min|`number`|`null`||

View File

@ -18,7 +18,7 @@ validator
## Props
|名称|类型|默认值|说明|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|value|`number`|`null`||
|step|`number`|`1`||
|min|`number`|`null`||

View File

@ -25,7 +25,7 @@ passively-activated
### Input Props
|Name|Type|Default|Description|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|type|`'text' \| 'password' \| 'textarea'`|`'text'`||
|pair|`boolean`|`false`|Whether to input pairwise value.|
|modelValue|`string \| [string, string]`|`null`|Value of input. When `pair` is `true`, `modelValue` is an array.|

View File

@ -26,7 +26,7 @@ passively-activated
### Input Props
|名称|类型|默认值|说明|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|type|`'text' \| 'password' \| 'textarea'`|`'text'`||
|pair|`boolean`|`false`|是否输入成对的值|
|modelValue|`string \| [string, string]`|`null`|文本输入的值。如果是 `pair``true``modelValue` 是一个数组|

View File

@ -19,7 +19,7 @@ scroll-to
|Name|Type|Default|Description|
|-|-|-|-|
|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.|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|themed-style|`{ [themeName: string]: Object }`|`null`||
|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|
@ -28,7 +28,7 @@ scroll-to
|-|-|-|-|
|bordered|`boolean`|`false`||
|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.|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
### Layout Header Props
@ -36,7 +36,7 @@ scroll-to
|-|-|-|-|
|bordered|`boolean`|`false`||
|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.|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
### Layout Sider Props
|Name|Type|Default|Description|
@ -48,7 +48,7 @@ scroll-to
|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'`.|
|show-content|`boolean`|`true`|If set to `false`, sider content will be invisible.|
|show-trigger|`boolean \| 'bar' \| 'arrow-circle'`|`false`|Whether to show the built-in trigger button on sider.|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|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|
|width|`number`|`272`||

View File

@ -19,7 +19,7 @@ scroll-to
|名称|类型|默认值|说明|
|-|-|-|-|
|position|`'static' \| 'absolute'`|`'static'`|`static` 模式将会把 CSS `position` 设为 `static` `absolute` 模式将会把 CSS `position` 设为 `absolute`,还将 `left`、`right`、`top`、`bottom` 设为 `0`。`absolute` 模式在你想将内容在一个固定容器或者将这个页面的布局设为固定位置的时候很有用。你可能需要修改一些 style 来确保它按照你预想的方式展示|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|themed-style|`{ [themeName: string]: Object }`|`null`||
|use-native-scrollbar|`boolean`|`true`|是否在自身使用原生滚动条。如果设定为 `false`, Layout 将会对内容使用 naive-ui 风格的滚动条|
@ -28,12 +28,12 @@ scroll-to
|-|-|-|-|
|bordered|`boolean`|`false`||
|position|`'static' \| 'absolute'`|`'static'`|`static` 模式将会把 CSS `position` 设为 `static` `absolute` 模式将会把 CSS `position` 设为 `absolute`,还将 `left`、`right`、`bottom` 设为 `0`。`absolute` 模式在你想将内容在一个固定容器或者将这个页面的布局设为固定位置的时候很有用。你可能需要修改一些 style 来确保它按照你预想的方式展示|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
### Layout Header Props
|名称|类型|默认值|说明|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|bordered|`boolean`|`false`||
|position|`'static' \| 'absolute'`|`'static'`|`static` 模式将会把 CSS `position` 设为 `static` `absolute` 模式将会把 CSS `position` 设为 `absolute`,还将 `left`、`right`、`top` 设为 `0`。`absolute` 模式在你想将内容在一个固定容器或者将这个页面的布局设为固定位置的时候很有用。你可能需要修改一些 style 来确保它按照你预想的方式展示|
@ -47,7 +47,7 @@ scroll-to
|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`|
|show-content|`boolean`|`true`|如果设为 `false`Sider 的内容将会变透明|
|show-trigger|`boolean \| 'bar' \| 'arrow-circle'`|`false`|内置的触发按钮是否展示|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|width|`number`|`272`||
|use-native-scrollbar|`boolean`|`true`|是否在自身使用原生滚动条。如果设定为 `false`, Sider 将会对内容使用 naive-ui 风格的滚动条|

View File

@ -10,7 +10,7 @@ border
### List Props
|Name|Type|Default|Description|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|bordered|`boolean`|`false`||
## Slots

View File

@ -10,7 +10,7 @@ border
### List Props
|名称|类型|默认值|说明|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|bordered|`boolean`|`false`||
## Slots

View File

@ -36,7 +36,7 @@ loading
## Props
|Name|Type|Default|Description|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|loading|`boolean`|`false`||
|trim|`boolean`|`false`||
|log|`string`|`null`||

View File

@ -36,7 +36,7 @@ loading
## Props
|名称|类型|默认值|说明|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|loading|`boolean`|`false`||
|trim|`boolean`|`false`||
|log|`string`|`null`||

View File

@ -30,7 +30,7 @@ collapse
|overlay-min-width|`number \| string`|`180`|The min width of submenu popover. Works when menu is horizontal or collapsed.|
|overlay-width|`number \| string`|`null`|The width of submenu popover. Works when menu is horizontal or collapsed.|
|root-indent|`number`|`null`|The indent of menu's first level children. If not set, menu will use `indent` in place of it.|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|value|`string`|`null`|The selected name of menu.|
### MenuItem Properties

View File

@ -29,7 +29,7 @@ collapse
|overlay-width|`number \| string`|`null`|弹出子菜单的宽度,只在菜单为水平或者折叠时生效|
|overlay-min-width|`number \| string`|`180`|弹出子菜单的最小宽度,只在菜单为水平或者折叠时生效|
|root-indent|`number`|`null`|菜单第一级的缩进,如果没有设定,使用 `indent` 代替|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|value|`string`|`null`|菜单当前的选中值|
### MenuItem Properties

View File

@ -19,7 +19,7 @@ preset-confirm-slot
### Modal
|Name|Type|Default|Description|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|show|`boolean`|`false`||
|mask-closable|`boolean`|`true`|Whether to emit `hide` event when click mask.|
|preset|`'card' \| 'confirm'`|`null`||

View File

@ -24,7 +24,7 @@ drawer-debug
### Modal
|名称|类型|默认值|说明|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|show|`boolean`|`false`||
|mask-closable|`boolean`|`true`|点击遮罩时是否发出 `hide` 事件|
|preset|`'card' \| 'confirm'`|`null`||

View File

@ -17,7 +17,7 @@ disabled
## Props
|Name|Type|Default|Description|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|page|`number`|`null`||
|page-count|`number`|`null`||
|page-size|`number`|`null`||

View File

@ -17,7 +17,7 @@ disabled
## Props
|名称|类型|默认值|说明|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|page|`number`|`null`||
|page-count|`number`|`null`||
|page-size|`number`|`null`||

View File

@ -1,7 +1,7 @@
# Basic
```html
<n-popover>
<template v-slot:activator>
<template v-slot:trigger>
<n-button>
Hover
</n-button>

View File

@ -1,39 +0,0 @@
# 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: {}
}
}
}
```

View File

@ -1,7 +1,7 @@
# Delay
```html
<n-popover :delay="500" :duration="500" :width="240">
<template v-slot:activator>
<template v-slot:trigger>
<n-button>
Delay 500, Duration 500
</n-button>

View File

@ -8,7 +8,7 @@
@show="handleShow"
@hide="handleHide"
>
<template v-slot:activator>
<template v-slot:trigger>
<n-button>
Hover
</n-button>
@ -25,7 +25,7 @@
@show="handleShow"
@hide="handleHide"
>
<template v-slot:activator>
<template v-slot:trigger>
<n-button>
Click
</n-button>
@ -38,11 +38,10 @@
:show="showPopover"
placement="bottom"
:width="200"
trigger="manual"
@show="handleShow"
@hide="handleHide"
>
<template v-slot:activator>
<template v-slot:trigger>
<n-button @click="showPopover = !showPopover">
Manual
</n-button>

View File

@ -9,7 +9,6 @@ If you just want to display some basic text message, see [Tooltip](n-tooltip) in
```demo
basic
trigger
controller
delay
no-arrow
event
@ -22,32 +21,28 @@ manual-position
## Props
|Name|Type|Default|Description|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|trigger|`'hover' \| 'trigger' \| 'manual'`|`'hover'`||
|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`|`true`||
|raw|`boolean`|`false`|Whether to use no default styles.|
|arrow-style|`Object`|-||
|body-class|`string`|-||
|body-style|`Object`|-||
|delay|`number`|`200`|Popover showing delay when trigger is `hover`|
|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.|
|duration|`number`|`200`|Popover vanish delay when trigger is `hover`|
|filp|`boolean`|`true`|Whether to filp the popover when there is no space for current placement.|
|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`||
|placement|`'top-start' \| 'top' \| 'top-end' \| 'right-start' \| 'right' \| 'right-end' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'left-start' \| 'left' \| 'left-end' \| `|`'bottom'`||
|raw|`boolean`|`false`|Whether to use no default styles.|
|show-arrow|`boolean`|`true`||
|show|`boolean`|-|Whether to show popover if set.|
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|trigger|`'hover' \| 'click'`|`'hover'`||
|x|`number`|-|The CSS `left` pixel value when popover manually positioned.|
|y|`number`|-|The CSS `top` pixel value when popover manually positioned.|
## Slots
|Name|Parameters|Description|
|-|-|-|
|activator|`()`|The element or component that triggers popover.|
|trigger|`()`|The element or component that triggers popover.|
|default|`()`|The content inside popover.|

View File

@ -2,7 +2,7 @@
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>
<n-popover :show="showPopover" :x="x" :y="y" manually-positioned>
Cool!
</n-popover>
```

View File

@ -1,7 +1,7 @@
# No Arrow
```html
<n-popover :show-arrow="false">
<template v-slot:activator>
<template v-slot:trigger>
<n-button>
Hover
</n-button>

View File

@ -2,7 +2,7 @@
```html
<div class="popover-grid">
<n-popover placement="top-start" trigger="click">
<template v-slot:activator>
<template v-slot:trigger>
<n-button size="small" style="grid-area: 1 / 1 / 2 / 2;">
Top Start
</n-button>
@ -12,7 +12,7 @@
</div>
</n-popover>
<n-popover placement="top" trigger="click">
<template v-slot:activator>
<template v-slot:trigger>
<n-button size="small" style="grid-area: 1 / 2 / 2 / 3;">
Top
</n-button>
@ -22,7 +22,7 @@
</div>
</n-popover>
<n-popover placement="top-end" trigger="click">
<template v-slot:activator>
<template v-slot:trigger>
<n-button size="small" style="grid-area: 1 / 3 / 2 / 4;">
Top End
</n-button>
@ -32,7 +32,7 @@
</div>
</n-popover>
<n-popover placement="left-start" trigger="click">
<template v-slot:activator>
<template v-slot:trigger>
<n-button size="small" style="grid-area: 2 / 1 / 3 / 2;">
Left Start
</n-button>
@ -42,7 +42,7 @@
</div>
</n-popover>
<n-popover placement="left" trigger="click">
<template v-slot:activator>
<template v-slot:trigger>
<n-button size="small" style="grid-area: 3 / 1 / 4 / 2;">
Left
</n-button>
@ -52,7 +52,7 @@
</div>
</n-popover>
<n-popover placement="left-end" trigger="click">
<template v-slot:activator>
<template v-slot:trigger>
<n-button size="small" style="grid-area: 4 / 1 / 5 / 2;">
Left End
</n-button>
@ -62,7 +62,7 @@
</div>
</n-popover>
<n-popover placement="right-start" trigger="click">
<template v-slot:activator>
<template v-slot:trigger>
<n-button size="small" style="grid-area: 2 / 3 / 3 / 4;">
Right Start
</n-button>
@ -72,7 +72,7 @@
</div>
</n-popover>
<n-popover placement="right" trigger="click">
<template v-slot:activator>
<template v-slot:trigger>
<n-button size="small" style="grid-area: 3 / 3 / 4 / 4;">
Right
</n-button>
@ -82,7 +82,7 @@
</div>
</n-popover>
<n-popover placement="right-end" trigger="click">
<template v-slot:activator>
<template v-slot:trigger>
<n-button size="small" style="grid-area: 4 / 3 / 5 / 4;">
Right End
</n-button>
@ -92,7 +92,7 @@
</div>
</n-popover>
<n-popover placement="bottom-start" trigger="click">
<template v-slot:activator>
<template v-slot:trigger>
<n-button size="small" style="grid-area: 5 / 1 / 6 / 2;">
Bottom Start
</n-button>
@ -102,7 +102,7 @@
</div>
</n-popover>
<n-popover placement="bottom" trigger="click">
<template v-slot:activator>
<template v-slot:trigger>
<n-button size="small" style="grid-area: 5 / 2 / 6 / 3;">
Bottom
</n-button>
@ -112,7 +112,7 @@
</div>
</n-popover>
<n-popover placement="bottom-end" trigger="click">
<template v-slot:activator>
<template v-slot:trigger>
<n-button size="small" style="grid-area: 5 / 3 / 6 / 4;">
Bottom End
</n-button>

View File

@ -1,7 +1,7 @@
# Raw Content
```html
<n-popover raw :show-arrow="false">
<template v-slot:activator>
<template v-slot:trigger>
<n-button>
Hover
</n-button>

View File

@ -1,27 +1,27 @@
# Trigger
```html
<n-popover placement="bottom" trigger="hover" style="margin-right: 12px;">
<template v-slot:activator>
<n-popover trigger="hover">
<template v-slot:trigger>
<n-button>Hover</n-button>
</template>
<span>
I wish they all could be California girls
</span>
</n-popover>
<n-popover :show="showPopover" placement="bottom" trigger="manual">
<template v-slot:activator>
<n-button @click="showPopover = !showPopover">
Manual
<n-popover trigger="click">
<template v-slot:trigger>
<n-button>
Click
</n-button>
</template>
<span>
I wish they all could be California girls
</span>
</n-popover>
<n-popover placement="bottom" trigger="click" style="margin-right: 12px;">
<template v-slot:activator>
<n-button>
Click
<n-popover :show="showPopover">
<template v-slot:trigger>
<n-button @click="showPopover = !showPopover">
Manual
</n-button>
</template>
<span>

View File

@ -1,7 +1,7 @@
# Width
# Body Style
```html
<n-popover :width="500">
<template v-slot:activator>
<n-popover :body-style="{ width: '500px' }">
<template v-slot:trigger>
<n-button>
Width 500px
</n-button>

View File

@ -1,7 +1,7 @@
# 基础用法
```html
<n-popover>
<template v-slot:activator>
<n-popover show>
<template v-slot:trigger>
<n-button>
悬浮
</n-button>

View File

@ -1,39 +0,0 @@
# 控制器
有时在非受控状态下,你可能也想控制弹出信息的显示状态。
可以通过传入 `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: {}
}
}
}
```

View File

@ -1,7 +1,7 @@
# 延迟
```html
<n-popover :delay="500" :duration="500" :width="240">
<template v-slot:activator>
<template v-slot:trigger>
<n-button>
延迟 500ms, 持续 500ms
</n-button>

View File

@ -4,11 +4,10 @@
placement="bottom"
:width="200"
trigger="hover"
style="margin-right: 12px;"
@show="handleShow"
@hide="handleHide"
>
<template v-slot:activator>
<template v-slot:trigger>
<n-button>
悬浮
</n-button>
@ -21,11 +20,10 @@
placement="bottom"
:width="200"
trigger="click"
style="margin-right: 12px;"
@show="handleShow"
@hide="handleHide"
>
<template v-slot:activator>
<template v-slot:trigger>
<n-button>
点击
</n-button>
@ -38,11 +36,10 @@
:show="showPopover"
placement="bottom"
:width="200"
trigger="manual"
@show="handleShow"
@hide="handleHide"
>
<template v-slot:activator>
<template v-slot:trigger>
<n-button @click="showPopover = !showPopover">
点击
</n-button>

View File

@ -9,7 +9,6 @@ Popover 在内容周围弹出一些隐藏的信息。Popover 里面没什么内
```demo
basic
trigger
controller
delay
no-arrow
event
@ -22,32 +21,28 @@ manual-position
## Props
|名称|类型|默认值|说明|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|trigger|`'hover' \| 'trigger' \| 'manual'`|`'hover'`||
|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`|`true`||
|raw|`boolean`|`false`|是否不添加默认样式|
|arrow-style|`Object \| null`|-||
|body-class|`string \| null`|-||
|body-style|`Object \| null`|-||
|delay|`number`|`200`|悬浮触发弹出信息的延迟|
|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` 渲染|
|duration|`number`|`300`|悬浮关闭弹出信息的延迟|
|filp|`boolean`|`true`|是否在当前放置方式不能提供足够空间的时候调整弹出信息的位置|
|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`||
|placement|`'top-start' \| 'top' \| 'top-end' \| 'right-start' \| 'right' \| 'right-end' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'left-start' \| 'left' \| 'left-end' \| `|`'bottom'`||
|raw|`boolean`|`false`|是否不添加默认样式|
|show-arrow|`boolean`|`true`||
|show|`boolean`|-|是否展示 popover|
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|trigger|`'hover' \| 'click'`|`'hover'`||
|x|`number`|-|手动控制位置时填出内容的 CSS `left` 的像素值|
|y|`number`|-|手动控制位置时填出内容的 CSS `top` 的像素值||
## Slots
|名称|参数|说明|
|-|-|-|
|activator|`()`|触发弹出信息的组件或元素|
|trigger|`()`|触发弹出信息的组件或元素|
|default|`()`|弹出的内容|
## Events

View File

@ -2,7 +2,7 @@
点它
```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>
<n-popover :show="showPopover" :x="x" :y="y" manually-positioned>
厉害!
</n-popover>
```

View File

@ -1,7 +1,7 @@
# 不要箭头
```html
<n-popover :show-arrow="false">
<template v-slot:activator>
<template v-slot:trigger>
<n-button>
悬浮
</n-button>

View File

@ -2,7 +2,7 @@
```html
<div class="popover-grid">
<n-popover placement="top-start" trigger="click">
<template v-slot:activator>
<template v-slot:trigger>
<n-button size="small" style="grid-area: 1 / 1 / 2 / 2;">
Top Start
</n-button>
@ -12,7 +12,7 @@
</div>
</n-popover>
<n-popover placement="top" trigger="click">
<template v-slot:activator>
<template v-slot:trigger>
<n-button size="small" style="grid-area: 1 / 2 / 2 / 3;">
Top
</n-button>
@ -22,7 +22,7 @@
</div>
</n-popover>
<n-popover placement="top-end" trigger="click">
<template v-slot:activator>
<template v-slot:trigger>
<n-button size="small" style="grid-area: 1 / 3 / 2 / 4;">
Top End
</n-button>
@ -32,7 +32,7 @@
</div>
</n-popover>
<n-popover placement="left-start" trigger="click">
<template v-slot:activator>
<template v-slot:trigger>
<n-button size="small" style="grid-area: 2 / 1 / 3 / 2;">
Left Start
</n-button>
@ -42,7 +42,7 @@
</div>
</n-popover>
<n-popover placement="left" trigger="click">
<template v-slot:activator>
<template v-slot:trigger>
<n-button size="small" style="grid-area: 3 / 1 / 4 / 2;">
Left
</n-button>
@ -52,7 +52,7 @@
</div>
</n-popover>
<n-popover placement="left-end" trigger="click">
<template v-slot:activator>
<template v-slot:trigger>
<n-button size="small" style="grid-area: 4 / 1 / 5 / 2;">
Left End
</n-button>
@ -62,7 +62,7 @@
</div>
</n-popover>
<n-popover placement="right-start" trigger="click">
<template v-slot:activator>
<template v-slot:trigger>
<n-button size="small" style="grid-area: 2 / 3 / 3 / 4;">
Right Start
</n-button>
@ -72,7 +72,7 @@
</div>
</n-popover>
<n-popover placement="right" trigger="click">
<template v-slot:activator>
<template v-slot:trigger>
<n-button size="small" style="grid-area: 3 / 3 / 4 / 4;">
Right
</n-button>
@ -82,7 +82,7 @@
</div>
</n-popover>
<n-popover placement="right-end" trigger="click">
<template v-slot:activator>
<template v-slot:trigger>
<n-button size="small" style="grid-area: 4 / 3 / 5 / 4;">
Right End
</n-button>
@ -92,7 +92,7 @@
</div>
</n-popover>
<n-popover placement="bottom-start" trigger="click">
<template v-slot:activator>
<template v-slot:trigger>
<n-button size="small" style="grid-area: 5 / 1 / 6 / 2;">
Bottom Start
</n-button>
@ -102,7 +102,7 @@
</div>
</n-popover>
<n-popover placement="bottom" trigger="click">
<template v-slot:activator>
<template v-slot:trigger>
<n-button size="small" style="grid-area: 5 / 2 / 6 / 3;">
Bottom
</n-button>
@ -112,7 +112,7 @@
</div>
</n-popover>
<n-popover placement="bottom-end" trigger="click">
<template v-slot:activator>
<template v-slot:trigger>
<n-button size="small" style="grid-area: 5 / 3 / 6 / 4;">
Bottom End
</n-button>

View File

@ -1,7 +1,7 @@
# 不用基础样式
```html
<n-popover raw :show-arrow="false">
<template v-slot:activator>
<template v-slot:trigger>
<n-button style="margin:0;">
悬浮
</n-button>

View File

@ -1,27 +1,27 @@
# 触发方式
```html
<n-popover placement="bottom" trigger="hover" style="margin-right: 12px;">
<template v-slot:activator>
<n-popover trigger="hover">
<template v-slot:trigger>
<n-button>悬浮</n-button>
</template>
<span>
I wish they all could be California girls
</span>
</n-popover>
<n-popover :show="showPopover" placement="bottom" trigger="manual">
<template v-slot:activator>
<n-button @click="showPopover = !showPopover">
手动
<n-popover trigger="click">
<template v-slot:trigger>
<n-button>
点击
</n-button>
</template>
<span>
I wish they all could be California girls
</span>
</n-popover>
<n-popover placement="bottom" trigger="click" style="margin-right: 12px;">
<template v-slot:activator>
<n-button>
点击
<n-popover :show="showPopover">
<template v-slot:trigger>
<n-button @click="showPopover = !showPopover">
手动
</n-button>
</template>
<span>

View File

@ -1,7 +1,7 @@
# 宽度
# 主体样式
```html
<n-popover :width="500">
<template v-slot:activator>
<n-popover :body-style="{ width: '500px' }">
<template v-slot:trigger>
<n-button style="margin:0;">
宽度 500px
</n-button>

View File

@ -14,7 +14,7 @@ processing
## Props
|Name|Type|Default|Description|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|processing|`boolean`|`false`||
|type|`'line' \| 'circle' \| 'multiple-circle'`|`line`||
|status|`'default' \| 'success' \| 'error' \| 'warning' \| 'info'`|`'default'`||

View File

@ -14,7 +14,7 @@ processing
## Props
|名称|类型|默认值|说明|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|processing|`boolean`|`false`||
|type|`'line' \| 'circle' \| 'multiple-circle'`|`line`||
|status|`'default' \| 'success' \| 'error' \| 'warning' \| 'info'`|`'default'`||

View File

@ -23,7 +23,7 @@ size
### Radio Props
|Name|Type|Default|Description|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|name|`string`|`undefined`|The name attribute of the radio element. If not set, name of `radio-group` will be used.|
|checked-value|`string \| number \| boolean`|`null`||
|value|`string \| number \| boolean`|`null`||
@ -40,7 +40,7 @@ size
### Radio Group Props
|Name|Type|Default|Description|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|name|`string`|`null`|The name attribute of the radio elements inside the group.|
|size|`'small' \| 'medium' \| 'large'`|`small`||
|value|`string \| number \| boolean`|`null`||

View File

@ -24,7 +24,7 @@ radio-focus-debug
### Radio Props
|名称|类型|默认值|说明|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|name|`string`|`undefined`|单选 radio 元素的 name 属性。如果没有设定会使用 `radio-group``name`|
|checked-value|`string \| number \| boolean`|`null`||
|value|`string \| number \| boolean`|`null`||
@ -42,7 +42,7 @@ radio-focus-debug
### Radio Group Props
|名称|类型|默认值|说明|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|name|`string`|`null`|选项组内部 radio 元素的 name 属性|
|size|`'small' \| 'medium' \| 'large'`|`small`||
|value|`string \| number \| boolean`|`null`||

View File

@ -19,7 +19,7 @@ size
|Name|Type|Default|Description|
|-|-|-|-|
|size|`'small' \| 'medium' \| 'large' \| 'huge'`|`'medium'`||
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|status|`'info' \| 'success' \| 'error' \| 'warning' \| 404 \| '404' \| 500 \| '500' \| 400 \| '400' \| 418 \| '418'`|`'info'`||
|title|`string`|`null`||
|description|`string`|`null`||

View File

@ -19,7 +19,7 @@ size
|名称|类型|默认值|说明|
|-|-|-|-|
|size|`'small' \| 'medium' \| 'large' \| 'huge'`|`'medium'`||
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|status|`'info' \| 'success' \| 'error' \| 'warning' \| 404 \| '404' \| 500 \| '500' \| 400 \| '400' \| 418 \| '418'`|`'info'`||
|title|`string`|`null`||
|description|`string`|`null`||

View File

@ -40,7 +40,7 @@ fallback-option
|remote|`boolean`|`false`|If you want to async get options. Note that if remote is set, `filter` & `tag` won't work on `options`. At that time, you are taking all control of `options`.|
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
|tag|`boolean`|`false`|Whether it can create new option, should be used with `filterable`.|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|value|`Array<string \| number> \| string \| number`|`false`||
|autofocus|`boolean`|`false`||

View File

@ -43,7 +43,7 @@ menu-debug
|remote|`boolean`|`false`|是否要异步获取选项。注意如果设定了,那么 `fitler``tag` 都不会对 `options` 生效。这个时候你在全权控制 `options`|
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
|tag|`boolean`|`false`|是否可以创建新的选项,需要和 `filterable` 一起使用|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|value|`Array<string \| number> \| string \| number`|`false`||
|autofocus|`boolean`|`false`||

View File

@ -14,7 +14,7 @@ mark
## Props
|Name|Type|Default|Description|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|marks|`{ [markValue: number]: string }`|||
|disabled|`boolean`|`false`||
|min|`number`|`0`||

View File

@ -15,7 +15,7 @@ mark
## Props
|名称|类型|默认值|说明|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|marks|`{ [markValue: number]: string }`|||
|disabled|`boolean`|`false`||
|min|`number`|`0`||

View File

@ -8,7 +8,7 @@ wrap
## Props
|Name|Type|Default|Description|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|spinning|`boolean`|`false`|It spin is active|
|size|`'small' \| 'in-small' \| 'medium' \| 'in-medium' \| 'large' \| 'in-large'`|`medium`||
|stroke|`string`|`null`|Color of spin|

View File

@ -8,7 +8,7 @@ wrap
## Props
|名称|类型|默认值|说明|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|spinning|`boolean`|`false`|Spin 在填入内容的状态是否激活|
|size|`'small' \| 'in-small' \| 'medium' \| 'in-medium' \| 'large' \| 'in-large'`|`medium`||
|stroke|`string`|`null`|Spin 的颜色|

View File

@ -7,7 +7,7 @@ basic
## Props
|Name|Type|Default|Description|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|label|`string`|`null`||
|value|`string`|`null`||

View File

@ -7,7 +7,7 @@ basic
## Props
|名称|类型|默认值|说明|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|label|`string`|`null`||
|value|`string`|`null`||

View File

@ -13,7 +13,7 @@ content
### Steps Props
|Name|Type|Default|Description|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|current|`number`|`null`||
|status|`'process' \| 'finish' \| 'error' \| 'wait'`|`'process'`||
|size|`'small' \| 'medium'`|`'medium'`||

View File

@ -13,7 +13,7 @@ content
### Steps Props
|名称|类型|默认值|说明|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|current|`number`|`null`||
|status|`'process' \| 'finish' \| 'error' \| 'wait'`|`'process'`||
|size|`'small' \| 'medium'`|`'medium'`||

View File

@ -13,7 +13,7 @@ event
## Props
|Name|Type|Default|Description|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|value|`boolean`|`false`||
|disabled|`boolean`|`false`||

View File

@ -13,7 +13,7 @@ event
## Props
|名称|类型|默认值|说明|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null`|`null`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|value|`boolean`|`false`||
|disabled|`boolean`|`false`||

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