🚀 VS Code で を入手しましょう!

クイックピックス

クイックピックスは、アクションを実行し、ユーザーからの入力を受け取る簡単な方法です。これは、構成オプションを選択したり、コンテンツをフィルタリングしたり、項目リストから選択したりする場合に役立ちます。

Quick Pick example

✔️ すること

  • 明確なメタファーのためにアイコンを使用する
  • 明確さを加え、アイテムを区別するのに役立つ、考え抜かれたアイコンを使用する
  • 現在の項目を表示するために説明を使用する (該当する場合)
  • (簡単な) 追加のコンテキストを提供するために詳細を使用する
  • 一連の基本的な入力には、マルチステップパターンを使用する
  • リストから選択するときに、新しい項目を作成するオプションを提供する (該当する場合)
  • マルチステップクイックピックスにはタイトルを使用する
  • テキスト入力なしのクイックピックスにはタイトルを使用する
  • テキスト入力を求めるクイックピックスにはタイトルを使用する (プレースホルダーを使用してヒントまたは例を表示する)
  • グローバルボタン (例: 更新アイコン) を備えたクイックピックスにはタイトルを使用する

❌ しないこと

  • 既存の機能を繰り返さない
  • プレースホルダーだけで目的を説明できる場合は、タイトルを使用しない
  • プレースホルダーなしで入力を使用しない

複数のステップ

クイックピックスは、複数のステップを特徴とするように構成できます。これらは、単一のフローで関連性はあるが別々の選択をキャプチャする必要がある場合に使用します。ステップ数の多い長いフローにクイックピックスを使用することは避けてください。ウィザードや同様の複雑なエクスペリエンスとして機能するのには適していません。

Multi-step Quick Pick example

フローの現在および合計ステップ数を示すクイックピックタイトルの「1/3」というテキストに注意してください。

複数選択

1 つのステップで選択する必要がある密接に関連する選択には、複数選択クイックピックを使用します。

Multi-step Quick Pick example

タイトル

クイックピックスは、メインの入力および選択 UI の上にタイトルバーを表示するように構成することもできます。ユーザーが選択を行うためにより多くのコンテキストを必要とする場合は、タイトルを使用します。クイックピックの入力プレースホルダーですでに使用されているラベルを使用するタイトルは避けてください。

Multi-step Quick Pick example

セパレーターの使用

クイックピック項目は、クイックピックセパレーターを使用して明確なセクションにグループ化できます。これらは、セクションを明確に示すための区切り線とラベルを備えています。拡張機能が、複数の明らかな選択グループを含むクイックピックを備えている場合は、セパレーターを使用します。

Quick Pick with separators