本站点文档内容均翻译自code.visualstudio.com,仅供个人学习,如有差异请以官网为准。

网页视图

如果你需要显示VS Code API所支持的定制功能,你可以使用webviews,它们是完全可定制的。重要的是要理解,只有在你绝对需要时才应使用webviews。

✔️ 做

  • 仅在绝对必要时使用网页视图
  • 仅在上下文合适时激活您的扩展
  • 仅在活动Windows中打开网页视图
  • 确保视图中的所有元素都可以进行主题化(请参阅webview-view-sample颜色令牌文档)
  • 确保您的观点遵循无障碍指南(颜色对比,ARIA标签,键盘导航)
  • 使用工具栏和视图中的命令操作

❌ 不要

  • 用于促销(升级、赞助商等)
  • 用于巫师
  • 打开每个Windows
  • 在扩展更新时打开(通过通知询问)
  • 添加与编辑器或工作区无关的功能
  • 重复现有功能(欢迎页面、设置、配置等)

网页视图示例

简单浏览器

此扩展在编辑器旁边为浏览器打开预览。

查看样本 - 浏览器

这个例子展示了 VS Code Web 就是在 VS Code 内部开发的。使用 Webview Windows来渲染一个浏览器般的Windows。

拉取请求

此扩展在工作区的仓库中以自定义树视图显示拉取请求,然后使用WebView进行拉取请求的详细视图。

Webview 示例 - 拉取请求

网页视图视图

你还可以将网页视图放入任何视图容器(侧边栏或面板)中,这些元素被称为网页视图视图。对网页视图的相同指导也适用于网页视图视图。

网页视图视图

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