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

快速选择

快速选择 是执行操作和接收用户输入的一种简便方法。这在选择配置选项、需要过滤内容或从项目列表中选择时非常有用。

快速选择示例

✔️ 做

  • 使用图标来表达清晰的隐喻
  • 使用体贴的图标,使内容更清晰并帮助区分项目
  • 使用描述来显示当前项目(如果适用)
  • 使用详细信息来提供(简短的)附加上下文
  • 使用多步模式进行一系列基本输入
  • 提供从列表中选择时创建新项目的选项(如果适用)
  • 为多步骤快速选择使用标题
  • 使用标题进行快速选择,无需输入文本
  • 使用标题快速选择需要文本输入的选项(使用占位符显示提示或示例)
  • 使用标题快速选择具有全球按钮的功能(例如刷新图标)

❌ 不要

  • 重复现有功能
  • 使用标题,当占位符可以自行描述其用途时
  • 使用没有占位符的输入

多个步骤

快速选择可以配置为包含多个步骤。当您需要在一个流程中捕获相关但分开的选择时,请使用这些功能。避免在具有许多步骤的长流程中使用快速选择,它们不适用于作为向导或类似复杂体验的功能。

多步骤快速选择示例

注意快速选择标题中的“1/3”文本,该文本表示当前和总步骤数。

多重选择

使用多选快速选择来一次性选择密切相关的选择项。

多步骤快速选择示例

标题

快速选择也可以配置为在主输入和选择用户界面的上方显示标题栏。当用户需要更多上下文来选择时,请使用标题。避免使用已经在快速选择的输入占位符中使用的标签作为标题。

多步骤快速选择示例

使用分隔符

快速选择项目可以使用快速选择分隔符按清晰的部分进行分组。这些分隔符带有分隔符和标签,以清楚地显示部分。如果扩展功能包含多个明显组别的快速选择,请使用分隔符。

快速选择带分隔符