Webview

如果您需要顯示超出 VS Code API 支援範圍的自訂功能,可以使用 webviews,它們是可以完全自訂的。請務必了解,只有在絕對必要時才應使用 webviews。

✔️ 建議做法

  • 僅在絕對必要時才使用 webviews
  • 僅在符合情境時才啟用您的擴充功能
  • 僅為使用中的視窗開啟 webviews
  • 確保檢視中的所有元素都支援佈景主題 (請參閱 webview-view-samplecolor tokens 文件)
  • 確保您的檢視遵循 無障礙功能指南 (色彩對比、ARIA 標籤、鍵盤導覽)
  • 在工具列與檢視中使用命令動作

❌ 不建議做法

  • 用於宣傳推廣 (升級、贊助商等)
  • 用於精靈
  • 在每個視窗上開啟
  • 在擴充功能更新時開啟 (請改透過通知詢問)
  • 新增與編輯器或工作區無關的功能
  • 重複現有的功能 (歡迎頁面、設定、組態等)

Webview 範例

簡易瀏覽器

此擴充功能會在編輯器旁開啟瀏覽器預覽。

Weview sample - Browser

此範例展示了直接在 VS Code 內部開發 VS Code Web 的過程。這裡使用 Webview 面板來轉譯類似瀏覽器的視窗。

提取要求

此擴充功能會在自訂樹狀檢視中顯示工作區儲存庫的提取要求,然後使用 webview 來顯示提取要求的詳細資料檢視。

Webview sample - Pull Request

Webview 檢視

您也可以將 webviews 放置於任何檢視容器 (側邊欄或面板) 中,這些元素稱為 webview 檢視。相同的 webview 指南也適用於 webview 檢視。

Webview View

此 webview 檢視顯示了建立提取要求的內容,其中使用了下拉式方塊、輸入欄位與按鈕。

English 한국어 中文(简体) 中文(繁體)
© . This website operates independently and is not affiliated with or endorsed by Microsoft. All brand names, logos, and trademarks are the property of their respective owners.