mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-24 12:45:18 +08:00
refactor(popover): support vue3
This commit is contained in:
parent
a7a37d995e
commit
2f4f5ca2b1
@ -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'`||
|
||||
|
@ -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'`||
|
||||
|
@ -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`||
|
||||
|
@ -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`||
|
||||
|
@ -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>`|`[]`||
|
||||
|
@ -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>`|`[]`||
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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`||
|
||||
|
@ -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`||
|
||||
|
@ -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`||
|
||||
|
@ -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`||
|
||||
|
@ -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
|
||||
|
@ -8,7 +8,7 @@ basic
|
||||
### Breadcrumb Props
|
||||
|名称|类型|默认值|说明|
|
||||
|-|-|-|-|
|
||||
|theme|`'light' \| 'dark' \| null`|`null`||
|
||||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|
||||
|separator|`string`|`'/'`||
|
||||
|
||||
## Slots
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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'`||
|
||||
|
@ -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`|`'请选择'`||
|
||||
|
@ -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`||
|
||||
|
||||
|
@ -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`||
|
||||
|
||||
|
@ -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`||
|
||||
|
@ -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`||
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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`||
|
||||
|
@ -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`||
|
||||
|
@ -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|
|
||||
|
@ -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`|表格的最大高度,如果内容高度高于它,那么表头将固定|
|
||||
|
@ -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`||
|
||||
|
||||
|
@ -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`||
|
||||
|
||||
|
@ -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`||
|
||||
|
@ -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`||
|
||||
|
@ -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|
|
||||
|
@ -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
|
||||
|名称|参数|说明|
|
||||
|
@ -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'`||
|
||||
|
@ -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'`||
|
||||
|
@ -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`||
|
||||
|
@ -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`||
|
||||
|
@ -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`||
|
||||
|
@ -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`||
|
||||
|
@ -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`||
|
||||
|
@ -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`||
|
||||
|
@ -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`||
|
||||
|
@ -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`||
|
||||
|
@ -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.|
|
||||
|
@ -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` 是一个数组|
|
||||
|
@ -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`||
|
||||
|
||||
|
@ -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 风格的滚动条|
|
||||
|
||||
|
@ -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
|
||||
|
@ -10,7 +10,7 @@ border
|
||||
### List Props
|
||||
|名称|类型|默认值|说明|
|
||||
|-|-|-|-|
|
||||
|theme|`'light' \| 'dark' \| null`|`null`||
|
||||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|
||||
|bordered|`boolean`|`false`||
|
||||
|
||||
## Slots
|
||||
|
@ -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`||
|
||||
|
@ -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`||
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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`||
|
||||
|
@ -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`||
|
||||
|
@ -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`||
|
||||
|
@ -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`||
|
||||
|
@ -1,7 +1,7 @@
|
||||
# Basic
|
||||
```html
|
||||
<n-popover>
|
||||
<template v-slot:activator>
|
||||
<template v-slot:trigger>
|
||||
<n-button>
|
||||
Hover
|
||||
</n-button>
|
||||
|
@ -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: {}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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.|
|
||||
|
||||
|
||||
|
@ -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>
|
||||
```
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -1,7 +1,7 @@
|
||||
# 基础用法
|
||||
```html
|
||||
<n-popover>
|
||||
<template v-slot:activator>
|
||||
<n-popover show>
|
||||
<template v-slot:trigger>
|
||||
<n-button>
|
||||
悬浮
|
||||
</n-button>
|
||||
|
@ -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: {}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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
|
||||
|
@ -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>
|
||||
```
|
||||
|
@ -1,7 +1,7 @@
|
||||
# 不要箭头
|
||||
```html
|
||||
<n-popover :show-arrow="false">
|
||||
<template v-slot:activator>
|
||||
<template v-slot:trigger>
|
||||
<n-button>
|
||||
悬浮
|
||||
</n-button>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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'`||
|
||||
|
@ -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'`||
|
||||
|
@ -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`||
|
||||
|
@ -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`||
|
||||
|
@ -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`||
|
||||
|
@ -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`||
|
||||
|
@ -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`||
|
||||
|
||||
|
@ -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`||
|
||||
|
||||
|
@ -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`||
|
||||
|
@ -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`||
|
||||
|
@ -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|
|
||||
|
@ -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 的颜色|
|
||||
|
@ -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`||
|
||||
|
||||
|
@ -7,7 +7,7 @@ basic
|
||||
## Props
|
||||
|名称|类型|默认值|说明|
|
||||
|-|-|-|-|
|
||||
|theme|`'light' \| 'dark' \| null`|`null`||
|
||||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|
||||
|label|`string`|`null`||
|
||||
|value|`string`|`null`||
|
||||
|
||||
|
@ -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'`||
|
||||
|
@ -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'`||
|
||||
|
@ -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`||
|
||||
|
||||
|
@ -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
Loading…
Reference in New Issue
Block a user