web-dev-qa-db-ja.com

選択する2つのフォーム、1つだけを選択

1つの画面で2つのAPIオプションを利用できます(Webツール)。どちらのフォームにも、タイトルと2つの入力フィールドがあります。ユーザーは一度に1つのAPIしか選択できません。

今、私はチェックボックス、1つだけを表示するドロップダウンメニュー、タブナビゲーションを試しました(そしてそれは奇妙です)。他を編集するときに他のオプションの入力フィールドを無効にしようとしました...など。それらのどれも解決策ではありません。

空白を描いています。どうやってこれを解決しますか?

enter image description here

21
Geffrey Bos

アコーディオンを使用できます。これは、以前に使用した例です。

enter image description here

65
Nick Groeneveld

ここで試すことができる2つのオプションが表示されます。

  1. 2ステップアプローチ:最初のステップでどのAPIを選択するか、[次へ]をクリックし、次のステップで設定を構成します。これを最初に行うと、UIはウィザードに似ていますが、一度設定して設定を変更する場合は、ウィザードではなく設定を表示する必要があるため、UIを変更する必要があります。
  2. ドロップダウンアプローチ:最初はドロップダウンのみが表示されます。ドロップダウンから目的のAPIを選択すると、その設定がその下に表示されます。ドロップダウンは表示されたままで、値が変更されると、設定のUIが変更されます。

個人的には、UIが初期設定と将来の変更に対して同じままであるため、ドロップダウンアプローチを選択します。

2
staccato