Ionic-radio-button

イオン-ラジオボタン

• ラジオボタン*は別の形式の要素であり、この章で説明します。 トグルフォームとチェックボックスフォームのラジオボタンの違いは、前者を使用する場合、リストからラジオボタンを1つだけ選択することです。 後者では、複数を選択できます。

ラジオボタンを追加する

常に複数のラジオボタンを選択できるため、最良の方法はリストを作成することです。 複数の要素が必要なときはいつでもこれを行いました。 リスト項目クラスは item-radio になります。 繰り返しますが、他のすべてのフォームで使用したように、これには label を使用します。 入力には name 属性があります。 この属性は、可能な選択肢として使用するすべてのボタンをグループ化します。 item-content クラスは、オプションを明確に表示するために使用されます。 最後に、 radio-icon クラスを使用して、ユーザーが選択したオプションをマークするために使用されるチェックマークアイコンを追加します。

次の例では、4つのラジオボタンがあり、2番目のラジオボタンが選択されています。

<div class = "list">
   <label class = "item item-radio">
      <input type = "radio" name = "group1"/>
      <div class = "item-content">
         Choice 1
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>

   <label class = "item item-radio">
      <input type = "radio" name = "group1"/>
      <div class = "item-content">
         Choice 2
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>

   <label class = "item item-radio">
      <input type = "radio" name = "group1"/>
      <div class = "item-content">
         Choice 3
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>

   <label class = "item item-radio">
      <input type = "radio" name = "group1"/>
      <div class = "item-content">
         Choice 4
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>
</div>

上記のコードは、次の画面を生成します-

イオンラジオボタン

複数のラジオボタングループ

複数のグループを作成したい場合があります。 これが name 属性の目的です。次の例では、最初の2つのボタンと最後の2つのボタンを2つのオプショングループとしてグループ化します。

*item-divider* クラスを使用して、2つのグループを分離します。 最初のグループの *name* 属性は *group1* に等しく、2番目のグループは *group2* を使用していることに注意してください。

<div class = "list">
   <div class = " item item-divider">
      Group1
   </div>

   <label class = "item item-radio">
      <input type = "radio" name = "group1"/>
      <div class = "item-content">
         Choice 1
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>

   <label class = "item item-radio">
      <input type = "radio" name = "group1"/>
      <div class = "item-content">
         Choice 2
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>

   <div class = "item item-divider">
      Group2
   </div>

   <label class = "item item-radio">
      <input type = "radio" name = "group2"/>
      <div class = "item-content">
         Choice 3
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>

   <label class = "item item-radio">
      <input type = "radio" name = "group2"/>
      <div class = "item-content">
         Choice 4
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>
</div>

上記のコードは、次の画面を生成します-

イオンラジオボタングループ