🚀 在 VS Code 中取得

快速選取

快速選取是一種執行動作並接收使用者輸入的簡單方式。當需要選取組態選項、過濾內容或從項目清單中挑選時,這非常有用。

Quick Pick example

✔️ 建議

  • 針對清晰的隱喻使用圖示
  • 使用經過深思熟慮的圖示,以增加清晰度並幫助區分項目
  • 使用描述來顯示目前的項目(如果適用)
  • 使用詳細資訊來提供(簡短的)額外上下文
  • 針對一系列基本輸入使用多步驟模式
  • 從清單中挑選時,提供建立新項目的選項(如果適用)
  • 針對多步驟快速選取使用標題
  • 針對沒有文字輸入的快速選取使用標題
  • 針對要求文字輸入的快速選取使用標題(使用佔位符號來顯示提示或範例)
  • 針對具有全域按鈕(例如重新整理圖示)的快速選取使用標題

❌ 不建議

  • 重複現有功能
  • 當佔位符號可以自行描述用途時,請勿使用標題
  • 請勿使用沒有佔位符號的輸入

多步驟

快速選取可以設定為具有多個步驟。當您需要在單一流中擷取相關但個別的選取項目時,請使用這些步驟。避免將快速選取用於具有多個步驟的長流程——它們不適合作為精靈或類似的複雜體驗。

Multi-step Quick Pick example

請注意快速選取標題中的「1/3」文字,表示流程中目前和總共的步驟數。

多重選取

針對需要在一個步驟中選取的密切相關的選取項目,使用多重選取快速選取。

Multi-step Quick Pick example

標題

快速選取也可以設定為在主要輸入和選取 UI 上方顯示標題列。當使用者需要更多關於正在進行的選取的上下文時,請使用標題。避免使用已在快速選取的輸入佔位符號中使用的標籤作為標題。

Multi-step Quick Pick example

使用分隔符號

快速選取項目可以使用快速選取分隔符號分組為清晰的區段。這些分隔符號具有分隔線和標籤,可清楚顯示區段。如果擴充功能具有包含多個明顯選取項目群組的快速選取,請使用分隔符號。

Quick Pick with separators