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>

Props

Transfer

Prop	Type	Default	Description
modelValue	(string | number)[]	[]	Keys of selected items in the target column, supports dual-binding
data	TransferDataItem[]	[]	Source items array
filterable	boolean	false	Whether to display search filter fields
filterMethod	(query: string, item: TransferDataItem) => boolean	—	Custom filter method
titles	string[]	—	Panel header titles, defaults to i18n texts if not provided
buttonTexts	string[]	—	Buttons text, fallback to chevron icons when empty

Events

Transfer

Event	Parameters	Description
update:modelValue	(string | number)[]	Triggers when the target values change
change	[value: (string | number)[], direction: 'left' | 'right', movedKeys: (string | number)[]]	Triggers when items are moved between columns

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