檢視

檢視 (Views) 是可以出現在側邊欄 (Sidebar) 或面板 (Panel) 中的內容容器。檢視可以包含樹狀檢視 (Tree Views)、歡迎檢視 (Welcome Views) 或網頁檢視 (Webview Views),並且可以顯示檢視動作 (View Actions)。檢視也可以由使用者重新排列或移動到另一個檢視容器 (例如:從主要側邊欄移動到次要側邊欄)。請限制所建立檢視的數量,因為其他擴充功能也可能貢獻於同一個檢視容器中。

✔️ 建議做法

  • 盡可能使用現有的圖示
  • 針對語言檔案使用檔案圖示
  • 使用樹狀檢視來顯示資料
  • 為每個檢視新增一個圖示 (以防它被移動到活動列或次要側邊欄——這兩者都使用圖示來代表檢視)
  • 將檢視數量保持在最低限度
  • 將名稱長度保持在最低限度
  • 限制自訂網頁檢視 (Webview Views) 的使用

❌ 不建議做法

  • 重複使用現有功能
  • 將樹狀項目作為單一動作項目使用 (例如:點擊時觸發指令)
  • 非必要時請勿使用自訂網頁檢視
  • 使用活動列項目 (檢視容器) 在編輯器中開啟網頁檢視

Views example

此範例使用樹狀檢視來顯示樹狀檢視項目的平面列表。

檢視位置

檢視可以放置在現有的檢視容器中,例如檔案總管、原始檔控制 (SCM) 和偵錯檢視容器。它們也可以透過活動列新增至自訂的檢視容器。此外,檢視也可以新增至面板中的任何檢視容器。它們也可以被拖曳至次要側邊欄。

View locations

檢視容器

檢視容器顧名思義,是渲染檢視的「父」容器。擴充功能可以貢獻自訂檢視容器至活動列/主要側邊欄或面板。使用者可以將整個檢視容器從活動列拖曳至面板 (或反之),也可以移動個別檢視。

Example of a View Container

這是放置在活動列/主要側邊欄中的檢視容器範例

Example of a View Container in a Panel

這是放置在面板中的檢視容器範例

樹狀檢視

樹狀檢視是一種強大且靈活的格式,用於在檢視中顯示內容。擴充功能可以新增從簡單的平面列表到深度巢狀樹狀結構的任何內容。

  • 使用描述性標籤為項目提供背景資訊 (如適用)
  • 使用產品圖示來區分項目類型 (如適用)

❌ 不建議做法

  • 使用樹狀檢視項目作為觸發指令的按鈕
  • 除非必要,否則請避免深層巢狀。對於大多數情況,幾層資料夾/項目是一個良好的平衡點。
  • 為項目新增超過三個動作

Example of a Tree View

歡迎檢視

當檢視為空時,您可以新增內容來引導使用者如何使用您的擴充功能或開始使用。歡迎檢視支援連結和圖示。

✔️ 建議做法

  • 僅在必要時使用歡迎檢視
  • 盡可能使用連結而非按鈕
  • 僅對主要動作使用按鈕
  • 使用清晰的連結文字來標示連結目的地
  • 限制內容長度
  • 限制歡迎檢視的數量
  • 限制檢視中按鈕的數量

❌ 不建議做法

  • 非必要時請勿使用按鈕
  • 請勿將歡迎檢視用於促銷活動
  • 請勿使用通用的「閱讀更多」作為連結文字

Welcome Views

此範例展示了擴充功能的一個主要動作,以及連結至說明文件的額外連結。

帶有進度條的檢視

您也可以透過參照檢視的 ID,在檢視中顯示進度條

View with progress

檢視動作

檢視可以在檢視工具列上公開檢視動作。請小心不要新增過多動作,以免造成混亂。使用內建的產品圖示有助於讓擴充功能與原生使用者介面融合。不過,如果需要自訂圖示,也可以提供 SVG 圖示。

Example of View Actions

© . This site is unofficial and not affiliated with Microsoft.