Transfer 设计文档

穿梭框,双栏列表间移动条目,严格对齐 Semi Design。单态模型:左侧勾选=立即迁移到右侧,无中间移动按钮。支持多选、本地/自定义/远程搜索、分组(groupList)、树状源面板(treeList,内嵌复用 Tree 组件)、左侧分页、右侧拖拽重排(draggable)与右侧虚拟化(virtualize)。

← API 文档

使用建议

穿梭框,双栏列表间移动条目,严格对齐 Semi Design。单态模型:左侧勾选=立即迁移到右侧,无中间移动按钮。支持多选、本地/自定义/远程搜索、分组(groupList)、树状源面板(treeList,内嵌复用 Tree 组件)、左侧分页、右侧拖拽重排(draggable)与右侧虚拟化(virtualize)。

Accessibility

ARIA role:group

  • 容器 role=group;每侧列表容器 role=list(对齐 Semi,非 listbox)
  • 左侧为原生 Checkbox 行(Space 勾选=立即迁移,无中间态);右侧已选项 role=listitem + 删除图标 aria-label
  • 搜索框 role=search + aria-label;全选/清空按钮为原生 Button 带 aria-label
  • treeList 模式内嵌复用 Tree 组件,继承其键盘/ARIA 语义

设计变量

变量
默认值
用法
--cd-transition-delay-transfer-item-bg var(--cd-motion-delay-none) 穿梭框条目-背景色-延迟时间(Semi transition_delay-none)
--cd-transition-duration-transfer-item-bg var(--cd-motion-duration-none) 穿梭框条目-背景色-动画持续时间(Semi transition_duration-none)
--cd-transition-function-transfer-item-bg var(--cd-motion-ease-in) 穿梭框条目-背景色-过渡曲线(Semi transition_function-easeIn)
显示第 1 条-第 3 条,共 3 条
  • 1