現已釋出!閱讀關於 11 月新增功能和修復的內容。

檢視

檢視是出現在側邊欄或面板中的內容容器。檢視可以包含樹形檢視、歡迎檢視或 Webview 檢視,也可以顯示檢視操作。使用者還可以重新排列檢視或將其移動到另一個檢視容器(例如,從主側邊欄移到次側邊欄)。請限制建立檢視的數量,因為其他擴充套件也可能在同一檢視容器中貢獻內容。

✔️ 建議

  • 儘可能使用現有圖示
  • 對語言檔案使用檔案圖示
  • 使用樹形檢視顯示資料
  • 為每個檢視新增圖示(以防其被移動到活動欄或次側邊欄 — 兩者都使用圖示來表示檢視)
  • 保持檢視數量最少
  • 保持名稱長度最短
  • 限制自定義 Webview 檢視的使用

❌ 不建議

  • 重複現有功能
  • 將樹專案用作單個操作項(例如,單擊時觸發命令)
  • 如果不需要,請使用自定義 Webview 檢視
  • 使用活動欄項(檢視容器)在編輯器中開啟 Webview

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

檢視操作

檢視可以在檢視工具欄上公開檢視操作。請注意不要新增過多操作,以免造成混亂。使用內建的產品圖示有助於擴充套件與原生 UI 相融合。但是,如果需要自定義圖示,可以提供 SVG 圖示。

Example of View Actions

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