参加你附近的 ,了解 VS Code 中的 AI 辅助开发。

快速选择

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

Quick Pick example

✔️ 建议

  • 使用图标来传达清晰的隐喻
  • 使用经过深思熟虑的图标,以增加清晰度并帮助区分项目
  • 使用描述来显示当前项目(如果适用)
  • 使用详细信息来提供(简要的)额外上下文
  • 对一系列基本输入使用多步模式
  • 从列表中选择时提供创建新项目的选项(如果适用)
  • 为多步快速选择使用标题
  • 为没有文本输入的快速选择使用标题
  • 为要求文本输入的快速选择使用标题(使用占位符显示提示或示例)
  • 为具有全局按钮(例如刷新图标)的快速选择使用标题

❌ 不建议

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

多步

快速选择可以配置为具有多个步骤。当您需要在单个流程中捕获相关但独立的选项时使用这些。避免将快速选择用于具有许多步骤的冗长流程——它们不适合用作向导或类似的复杂体验。

Multi-step Quick Pick example

请注意快速选择标题中的“1/3”文本,它指示流程中当前和总步数。

多项选择

对于需要在一步中选择的密切相关的选项,使用多选快速选择。

Multi-step Quick Pick example

标题

快速选择还可以配置为在主输入和选择 UI 上方显示标题栏。当用户需要更多上下文来了解正在进行的选项时,请使用标题。避免使用快速选择输入占位符中已使用的标签作为标题。

Multi-step Quick Pick example

使用分隔符

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

Quick Pick with separators