Transfer 穿梭机

让用户用直观的方式在两栏中移动元素，完成选择行为的组件。

简介

一种让用户用直观的方式在两栏中移动元素，完成选择行为的双栏穿梭选择框组件。

基本构成

基本样式

基础用法

带搜索功能

带分组标签

基本状态

默认状态

选中状态

报错状态

禁用状态

设计说明

在界面中如何使用该组件？

1.使用场景

• 用户需要选择的选项较多的场景。
• 用户需要对勾选项进行二次确认的场景。
• 用户需要对比确定的字段数≤4个的场景。

2.特殊用法 —— 在密集表单中的用法

• 当表单内容较为密集，不适合将穿梭框外置时，建议将穿梭框置于二级抽屉中，表单仅展示所选数量，如下图：

  

3.特殊用法 —— 仅做单次添加

• 当穿梭框仅作为单次添加时，如下图：

  

4.特殊用法 —— 有最大数量限制

• 当添加有最大数量限制时，交互形式如下（假设添加上限为5）：

  

常见问题

Transfer 和 Select、表格多选的使用场景区别

• Select多用于用户需要选择的项不多的场景，选项字段<2个。
• Transfer多用于用户需要选择的项较多的场景，选项字段≤4个，如下图所示：

• 表格多选多用于用户需要对比确定的字段较多的场景，选项字段> 4个。

场景举例：要选择的数据量较大，比如一次要选几十上百条

当选择数据量较大时，穿梭框是比较便于二次确认的组件。

当选择数据量较大时，select明显在有限高度内无法很好的展示出已选项。

场景举例：要对比多个字段才能准确定位选择项

需要展示对比多个字段时，用表格进行选择可以清晰地展示对比每一项字段。

select和transfer由于左右宽度限制无法直观展示多字段。