跳到主要内容
+

穿梭列表

穿梭列表(或“穿梭框”)使用户能够在列表之间移动一个或多个列表项。

基础穿梭列表

为了完整性,此示例包含“全部移动”按钮,但并非每个穿梭列表都需要这些按钮。

列表项 1
列表项 2
列表项 3
列表项 4
列表项 5
列表项 6
列表项 7
列表项 8

增强型穿梭列表

此示例将“全部移动”按钮替换为“全选/全不选”复选框,并添加了一个计数器。

选项0/4 已选择

列表项 1
列表项 2
列表项 3
列表项 4
已选0/4 已选择

列表项 5
列表项 6
列表项 7
列表项 8

局限性

该组件有一些局限性

  • 它仅在桌面端工作。 如果您需要选择的选项数量有限,请优先选择 Autocomplete 组件。 如果移动端支持对您很重要,请查看 #27579。
  • 没有从 npm 导出的高级组件。 演示基于组合。 如果这对您很重要,请查看 #27579。

API

请参阅下面的文档,全面了解此处提及的组件的所有 props 和 classes。