Transfer
Transfer component is used to move items between two lists.
Features
- 🔄 Data Transfer: Move items seamlessly between source and target lists.
- 🔍 Searchable: Built-in filtering to easily find items in large lists.
- 🖱️ Drag & Drop: Support drag and drop sorting for the selected items.
- 📝 Form Integration: Works perfectly with
BrFormfor data validation. - 🎨 Customizable: Extensive slots for custom rendering and theming support.
Basic Usage
The most basic usage of BrTransfer. It requires data for the data source and v-model for the keys of the selected items.
0 / 13
Source ListItem 1
Item 3
Item 4
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
0 / 2
Target ListItem 2
Item 5
Example
Search and Drag Drop
Enable searching by setting filterable. Enable drag and drop sorting in the target list by setting draggable.
0 / 18
AvailableItem 1Description for item 1
Item 2Description for item 2
Item 4Description for item 4
Item 5Description for item 5
Item 7Description for item 7
Item 8Description for item 8
Item 9Description for item 9
Item 10Description for item 10
Item 11Description for item 11
Item 12Description for item 12
Item 13Description for item 13
Item 14Description for item 14
Item 15Description for item 15
Item 16Description for item 16
Item 17Description for item 17
Item 18Description for item 18
Item 19Description for item 19
Item 20Description for item 20
0 / 2
Selected (Draggable)Item 3Description for item 3
Item 6Description for item 6
Example
Form Integration
BrTransfer can be seamlessly integrated with BrForm for form validation.
Example
Theme Customization
Use BrConfigProvider to customize the theme colors and border radius.
Custom Primary Color & Radius
0 / 4
Theme LeftItem 1
Item 2
Item 4
Item 5
0 / 1
Theme RightItem 3
Example
API
Transfer Props
| Name | Type | Default | Description |
|---|---|---|---|
modelValue / v-model | (string | number)[] | [] | Selected keys |
data | TransferDataItem[] | [] | Data source |
filterable | boolean | false | Whether the transfer is filterable |
filterPlaceholder | string | 'Search here' | Placeholder for the search input |
filterMethod | (query: string, item: TransferDataItem) => boolean | - | Custom filter method |
titles | [string, string] | ['Source', 'Target'] | Titles of the left and right panels |
buttonTexts | [string, string] | ['', ''] | Texts for the left and right buttons |
draggable | boolean | false | Whether items in the target panel can be dragged to sort |
targetOrder | 'original' | 'push' | 'unshift' | 'original' | Order of the items in the target panel |
size | 'sm' | 'md' | 'lg' | 'md' | Size of the component |
disabled | boolean | false | Whether the component is disabled |
emptyText | string | 'No data' | Text to display when there is no data |
TransferDataItem
| Property | Type | Description |
|---|---|---|
key | string | number | Unique identifier of the item |
label | string | Display text |
disabled | boolean | Whether the item is disabled |
[key: string] | any | Additional custom properties |
Transfer Emits
| Name | Parameters | Description |
|---|---|---|
update:modelValue | (value: (string | number)[]) | Emitted when the selected items change |
change | (value: (string | number)[], direction: 'left' | 'right', movedKeys: (string | number)[]) | Emitted when items are moved between lists |
search | (query: string, direction: 'left' | 'right') | Emitted when the search query changes |
left-check-change | (checkedKeys: (string | number)[], checkedNodes: TransferDataItem[]) | Emitted when checked items in the left panel change |
right-check-change | (checkedKeys: (string | number)[], checkedNodes: TransferDataItem[]) | Emitted when checked items in the right panel change |
Transfer Slots
| Name | Description |
|---|---|
option | Custom render for data items |
leftEmpty | Custom empty content for the left panel |
rightEmpty | Custom empty content for the right panel |
leftFooter | Custom footer for the left panel |
rightFooter | Custom footer for the right panel |