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

docs(transfer): vue3

Browse Source
This commit is contained in:
07akioni 2020-10-22 13:42:05 +08:00
parent 1d161dfec1
commit 157409147f
2 changed files with 25 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
demo/documentation/components/transfer/enUS/index.demo-entry.md
View File

@ -4,31 +4,27 @@ Left, right, left, right... As a boring guy, I can play it all day.
## Demos
```demo
basic
large-data
size
filterable
```
## V-model
|Prop|Event|
|-|-|
|value|change|
<!-- large-data -->
## Props
|Name|Type|Default|Description|
|-|-|-|-|
|disabled|`boolean`|`true`||
|filterable|`boolean`|`false`||
|filter|`(pattern: string, option: TransferOption, from: 'source' \| 'target') => boolean`|A basic label string match function||
|options|`Array<TransferOption>`|`[]`||
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
|source-filter-placeholder|`string`|`undefined`||
|source-title|`string`|`'Source'`||
|target-filter-placeholder|`string`|`undefined`||
|target-title|`string`|`'Target'`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|value|`Array<string \| number>`|`null`||
|options|`Array<TransferOption>`|`[]`||
|disabled|`boolean`|`true`||
|virtual-scroll|`boolean`|`false`|If use virtual scroll on transfer. If set to `true` it can handles large data (and turn transfer animation off)|
|source-title|`string`|`'Source'`||
|target-title|`string`|`'Target'`||
|filterable|`boolean`|`false`||
|source-filter-placeholder|`string`|`null`||
|target-filter-placeholder|`string`|`null`||
|filter|`(pattern: string, option: TransferOption, from: 'source' \| 'target') => boolean`|A basic label string match function||
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
|on-update:value|`(value: Array<string \| number>) => any`|`undefined`||
<!-- |virtual-scroll|`boolean`|`false`|If use virtual scroll on transfer. If set to `true` it can handles large data (and turn transfer animation off)| -->
### TransferOption Type
|Property|Type|Description|
@ -42,11 +38,11 @@ filterable
|-|-|-|
|change|`(Array<string \| number>)`||
## Notes
<!-- ## Notes
When I heared from my colleague he's going to put more than a thousand items into the transfer, I was astonished. My poor imagination can't come up with a scene that must use a transfer with thousands of items. But I must admit, it's my mind that always not considerate enough.
Months earlier, I have built a interesting animation in transfer but it will cause reflow on many DOM elements. At that time, I hadn't think of people would insert so much data in it. Although I never compromise on styles, it's hard to surpass the limit of browser and hardware. It sounds like a kind of philosophy problem to build a car as comfort as a Rolls Royce and as fast as a Ferrari (or Porsche, etc) which is nearly impossible.
(Don't tell me the Bentley Continental GT, I don't like the car's appearance.)
Style can't be compromised on. However, the problem need to be solved. So finally I add a boost trigger on transfer to deal with large data (by the way turn off the animation).
Style can't be compromised on. However, the problem need to be solved. So finally I add a boost trigger on transfer to deal with large data (by the way turn off the animation). -->

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

@ -7,23 +7,24 @@ basic
size
filterable
```
<!-- large-data -->
## Props
|名称|类型|默认值|说明|
|-|-|-|-|
|disabled|`boolean`|`true`||
|filterable|`boolean`|`false`||
|filter|`(pattern: string, option: TransferOption, from: 'source' \| 'target') => boolean`|一个简单的标签字符串匹配函数||
|options|`Array<TransferOption>`|`[]`||
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
|source-filter-placeholder|`string`|`undefined`||
|source-title|`string`|`'源项'`||
|target-filter-placeholder|`string`|`undefined`||
|target-title|`string`|`'目标项'`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|value|`Array<string \| number>`|`null`||
|options|`Array<TransferOption>`|`[]`||
|disabled|`boolean`|`true`||
|source-title|`string`|`'源项'`||
|target-title|`string`|`'目标项'`||
|filterable|`boolean`|`false`||
|source-filter-placeholder|`string`|`undefined`||
|target-filter-placeholder|`string`|`undefined`||
|filter|`(pattern: string, option: TransferOption, from: 'source' \| 'target') => boolean`|一个简单的标签字符串匹配函数||
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
|on-update:value|`(value: Array<string \| number>) => any`|`undefined`||
<!-- |virtual-scroll|`boolean`|`false`|If use virtual scroll on transfer. If set to `true` it can handles large data (and turn transfer animation off)| -->
### TransferOption Type
|属性|类型|说明|