跳至內容
+

穿梭列表

穿梭列表(或「梭子」)讓使用者能夠在列表之間移動一個或多個列表項目。

基本穿梭列表

為了完整起見,此範例包含「全部移動」的按鈕,但並非每個穿梭列表都需要這些按鈕。

列表項目 1
列表項目 2
列表項目 3
列表項目 4
列表項目 5
列表項目 6
列表項目 7
列表項目 8

增強型穿梭列表

此範例將「全部移動」按鈕替換為「全選/全部取消選取」核取方塊,並新增計數器。

選項已選取 0/4

列表項目 1
列表項目 2
列表項目 3
列表項目 4
已選擇已選取 0/4

列表項目 5
列表項目 6
列表項目 7
列表項目 8

限制

此元件有一些限制

  • 它僅適用於桌上型電腦。如果您要選擇的選項數量有限,請優先使用自動完成元件。如果行動裝置支援對您很重要,請查看#27579
  • npm 沒有匯出高階元件。這些範例是以組合為基礎。如果這對您很重要,請查看#27579

API

請參閱以下文件,以取得此處提及之元件的所有 props 和 classes 的完整參考。