现已推出!阅读 10 月份的新功能和修复。

视图

视图 是可以出现在侧边栏或面板中的内容容器。视图可以包含树形视图、欢迎视图或 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