Ionic - Nút radio

Radio buttonslà một dạng khác của một phần tử mà chúng ta sẽ đề cập trong chương này. Sự khác biệt giữa các nút radio từ dạng chuyển đổi và hộp kiểm là khi sử dụng dạng cũ, bạn chỉ chọn một nút radio từ danh sách. Vì sau này cho phép bạn chọn nhiều hơn một.

Thêm các nút radio

Vì sẽ luôn có nhiều hơn một nút radio để bạn lựa chọn, nên cách tốt nhất là tạo một danh sách. Chúng tôi đã làm điều này bất cứ khi nào chúng tôi muốn có nhiều yếu tố. Lớp mục danh sách sẽ làitem-radio. Một lần nữa, chúng tôi sẽ sử dụnglabelcho điều này như chúng tôi đã sử dụng với tất cả các biểu mẫu khác. Đầu vào sẽ cónamethuộc tính. Thuộc tính này sẽ nhóm tất cả các nút mà bạn muốn sử dụng như một lựa chọn khả thi. Cácitem-contentlớp được sử dụng để hiển thị các tùy chọn một cách rõ ràng. Cuối cùng, chúng tôi sẽ sử dụngradio-icon lớp để thêm biểu tượng dấu kiểm sẽ được sử dụng để đánh dấu tùy chọn mà người dùng chọn.

Trong ví dụ sau, có bốn nút radio và nút thứ hai được chọn.

<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>

Đoạn mã trên sẽ tạo ra màn hình sau:

Nhiều nhóm nút radio

Đôi khi bạn muốn tạo nhiều hơn một nhóm. Đây là những gìnamethuộc tính được tạo ra cho; ví dụ sau sẽ nhóm hai nút đầu tiên và hai nút cuối cùng thành hai nhóm tùy chọn.

Chúng tôi sẽ sử dụng item-dividerlớp để tách hai nhóm. Lưu ý rằng nhóm đầu tiên cóname thuộc tính bằng group1 và cái thứ hai sử dụng 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>

Đoạn mã trên sẽ tạo ra màn hình sau: