Skip to content

穿梭框

概述

穿梭选择框用直观的方式在两栏中移动元素,完成选择行为。选择一个或以上的选项后,点击对应的方向键,可以把选中的选项移动到另一栏。其中,左边一栏为 source,右边一栏为 target,API 的设计也反映了这两个概念。

何时使用

需要在多个可选项中进行多选时。

比起 Select 和 TreeSelect,穿梭框占据更大的空间,可以展示可选项的更多信息。

初始状态

穿梭框的左右两侧各位一个选项集合,中间是控制选项移动的按钮;

选项集合标题字段由“集合名称”和“选项数目”组成;选项列表区域支持滚动;

初始未编辑状态时,左侧选项集所有选项未勾选,右侧选项集内无选项;

穿梭按钮在未勾选选项时,为 disable 状态;

选中状态

顶部选择框可进行全选操作,“选择数目”显示当前已选数目与合集内选项总数;

已有选项时,向右穿梭的按钮为可点击状态;

合集内存在 disable 状态的选项,如:选项3;右侧同理;

单向状态

顶部选择框可进行全选操作,“选择数目”显示当前已选数目与合集内选项总数;

已有选项时,向右穿梭后无法从右边返回左边内容选择框,必须通过点击删除按钮后,才能返回左边选择框,右侧选择框顶部删除定义为全部删除, 并回到左边选择框

带搜索的穿梭框

列表区域可配置搜索框;穿梭交互规则与基本穿梭框同上一致;