mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-24 12:45:18 +08:00
48 lines
2.2 KiB
Markdown
48 lines
2.2 KiB
Markdown
# Transfer
|
|
<!--single-column-->
|
|
Left, right, left, right... As a boring guy, I can play it all day.
|
|
## Demos
|
|
```demo
|
|
basic
|
|
size
|
|
filterable
|
|
```
|
|
<!-- 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' \| string`|`undefined`||
|
|
|value|`Array<string \| number>`|`null`||
|
|
|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|
|
|
|-|-|-|
|
|
|label|`string`||
|
|
|value|`string \| number`|value of an option, should be unique in options|
|
|
|disabled|`boolean`||
|
|
|
|
## Events
|
|
|Name|Parameters|Description|
|
|
|-|-|-|
|
|
|change|`(Array<string \| number>)`||
|
|
|
|
<!-- ## 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). --> |