Webview

如果您需要展示 VS Code API 不支持的自定义功能,可以使用Webviews,它们具有完全的可定制性。请务必注意:只有在绝对必要时才应使用 Webviews。

✔️ 建议

  • 仅在绝对必要时使用 Webviews
  • 仅在上下文环境适当时激活您的扩展
  • 仅为活动窗口打开 Webviews
  • 确保视图中的所有元素均可应用主题(请参阅 webview-view-sample颜色标记文档)
  • 确保您的视图遵循辅助功能指南(颜色对比度、ARIA 标签、键盘导航)
  • 在工具栏和视图中使用命令操作

❌ 不建议

  • 用于促销(升级、赞助等)
  • 用于向导式界面
  • 在每个窗口上打开
  • 在扩展更新时打开(请改用通知询问)
  • 添加与编辑器或工作区无关的功能
  • 重复现有的功能(欢迎页面、设置、配置等)

Webview 示例

简单浏览器

此扩展在编辑器侧边打开一个浏览器预览。

Weview sample - Browser

此示例展示了在 VS Code 内部开发 VS Code Web 的过程。使用 Webview 面板来呈现类似浏览器的窗口。

Pull Request(拉取请求)

此扩展在自定义树状视图中显示工作区存储库的拉取请求,并使用 Webview 来呈现拉取请求的详细视图。

Webview sample - Pull Request

Webview 视图

您还可以将 Webviews 放置在任何视图容器(侧边栏或面板)中,这些元素被称为 Webview 视图。同样的 Webview 指导原则也适用于 Webview 视图。

Webview View

此 Webview 视图显示了用于创建拉取请求的内容,其中使用了下拉菜单、输入框和按钮。

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