Transfer

A double-column transfer selector featuring thick borders, hard shadow offsets, and active press feedback characteristic of Neo-Brutalist design.

Preview

Preview

基础用法

源列表

0/13

备选项 2

备选项 3

备选项 5

备选项 6

备选项 7

备选项 8

备选项 9

备选项 10

备选项 11

备选项 12

备选项 13

备选项 14

备选项 15

目标列表

0/2

备选项 1

备选项 4

可搜索过滤

源列表

0/14

备选项 1

备选项 3

备选项 4

备选项 5

备选项 6

备选项 7

备选项 8

备选项 9

备选项 10

备选项 11

备选项 12

备选项 13

备选项 14

备选项 15

目标列表

0/1

备选项 2

自定义标题和按钮文字

可选择项

0/15

备选项 1

备选项 2

备选项 3

备选项 4

备选项 5

备选项 6

备选项 7

备选项 8

备选项 9

备选项 10

备选项 11

备选项 12

备选项 13

备选项 14

备选项 15

已选择项

0/0

暂无数据

Installation

pnpm dlx brutx-vue@latest add transfer

Usage

Basic Usage

<script setup>
import { ref } from 'vue'
import { Transfer } from 'brutx-ui-vue'

const data = ref([
    { key: 1, label: 'Option 1' },
    { key: 2, label: 'Option 2' },
    { key: 3, label: 'Option 3', disabled: true },
    { key: 4, label: 'Option 4' }
])

const value = ref([1])
</script>

<template>
    <Transfer v-model="value" :data="data" />
</template>

Search & Filter

Enable search and filtering functionality by setting the filterable property to true.

<template>
    <Transfer v-model="value" :data="data" filterable />
</template>

Custom Titles and Button Texts

You can customize the headers and action buttons using the titles and buttonTexts props respectively.

<template>
    <Transfer
        v-model="value"
        :data="data"
        :titles="['Source items', 'Target items']"
        :button-texts="['Undo', 'Add']"
    />
</template>

API Reference

Transfer — Props

Name	Type	Default	Description
class	string | undefined	undefined	Custom CSS classes added to the transfer root container.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/transfer/Transfer.vue Resolved value undefined Source Transfer.vue:14 packages/ui/src/components/transfer/Transfer.vue
modelValue	(string | number)[] | undefined	[] Factory evaluated per instance	The keys of items in the right target panel, bound with v-model.
Details Declared type (string | number)[] | undefined Default value details Declaration () => [] Source: packages/ui/src/components/transfer/Transfer.vue Resolved value [] Source Transfer.vue:15 packages/ui/src/components/transfer/Transfer.vue
data	TransferDataItem[] | undefined	[] Factory evaluated per instance	The transfer data source. Each item has a key and label, and may be disabled to prevent moving it.
Details Declared type TransferDataItem[] | undefined Referenced types TransferDataItem Type definition — TransferDataItem export interface TransferDataItem { key: string | number label: string disabled?: boolean } Default value details Declaration () => [] Source: packages/ui/src/components/transfer/Transfer.vue Resolved value [] Source Transfer.vue:16 packages/ui/src/components/transfer/Transfer.vue
filterable	boolean | undefined	false	Shows a filter input in each panel.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/transfer/Transfer.vue Resolved value false Source Transfer.vue:17 packages/ui/src/components/transfer/Transfer.vue
filterMethod	((query: string, item: TransferDataItem) => boolean) | undefined	undefined	Custom query-to-item matcher; return true to keep an item in the filtered results.
Details Declared type ((query: string, item: TransferDataItem) => boolean) | undefined Referenced types TransferDataItem Type definition — TransferDataItem export interface TransferDataItem { key: string | number label: string disabled?: boolean } Default value details Declaration undefined Source: packages/ui/src/components/transfer/Transfer.vue Resolved value undefined Source Transfer.vue:18 packages/ui/src/components/transfer/Transfer.vue
titles	string[] | undefined	undefined	Sets the source and target panel titles in order; localized defaults are used when both titles are not supplied.
Details Declared type string[] | undefined Default value details Declaration undefined Source: packages/ui/src/components/transfer/Transfer.vue Resolved value undefined Source Transfer.vue:19 packages/ui/src/components/transfer/Transfer.vue
buttonTexts	string[] | undefined	undefined	Sets the left and right transfer button labels in order; direction icons are shown when labels are omitted.
Details Declared type string[] | undefined Default value details Declaration undefined Source: packages/ui/src/components/transfer/Transfer.vue Resolved value undefined Source Transfer.vue:20 packages/ui/src/components/transfer/Transfer.vue
panelWidth	number | undefined	260	Sets the width of each panel in pixels.
Details Declared type number | undefined Default value details Declaration 260 Source: packages/ui/src/components/transfer/Transfer.vue Resolved value 260 Source Transfer.vue:22 packages/ui/src/components/transfer/Transfer.vue
panelHeight	number | undefined	400	Sets the height of each panel in pixels.
Details Declared type number | undefined Default value details Declaration 400 Source: packages/ui/src/components/transfer/Transfer.vue Resolved value 400 Source Transfer.vue:24 packages/ui/src/components/transfer/Transfer.vue

Transfer — Events

Name	Signature or type	Description
@update:modelValue	[value: (string | number)[]]	Emits the updated target key array when the right-side selection changes so v-model can be updated.
Details Declared type [value: (string | number)[]] Source Transfer.vue packages/ui/src/components/transfer/Transfer.vue
@change	[value: (string | number)[], direction: "right" | "left", movedKeys: (string | number)[]]	Emits the updated target keys, movement direction, and keys moved in this operation.
Details Declared type [value: (string | number)[], direction: "right" | "left", movedKeys: (string | number)[]] Literal values "left" "right" Source Transfer.vue packages/ui/src/components/transfer/Transfer.vue

Data Types

interface TransferDataItem {
    key: string | number
    label: string
    disabled?: boolean
}

Exported Types

import type { TransferDataItem } from 'brutx-ui-vue'

Accessibility

• Keyboard Interaction:
  • Checkboxes inside each column panel support selection using Space / Enter keys
  • Action buttons support focus via Tab key and activation using Enter / Space keys
• ARIA Attributes: Operation buttons are equipped with aria-label to state transfer direction ("Move selected to right" / "Move selected to left"). Checked items are managed and presented via standard checkboxes
• Focus Management: The transfer buttons retain focus after items are moved, allowing efficient consecutive keyboard operations