Ionic - Hộp kiểm

Ionic checkboxgần giống như chuyển đổi. Hai cái này được tạo kiểu khác nhau nhưng được sử dụng cho những mục đích giống nhau.

Thêm hộp kiểm

Khi tạo biểu mẫu hộp kiểm, bạn cần thêm checkboxtên lớp cho cả nhãn và các phần tử đầu vào. Ví dụ sau đây cho thấy hai hộp kiểm đơn giản, một được chọn và hộp còn lại thì không.

<label class = "checkbox">
   <input type = "checkbox">
</label>

<label class = "checkbox">
   <input type = "checkbox">
</label>

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

Nhiều hộp kiểm

Như chúng tôi đã trình bày, danh sách sẽ được sử dụng cho nhiều phần tử. Bây giờ chúng ta sẽ sử dụngitem-checkbox lớp cho mỗi mục danh sách.

<ul class = "list">
   <li class = "item item-checkbox">
      Checkbox 1
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>

   <li class = "item item-checkbox">
      Checkbox 2
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>

   <li class = "item item-checkbox">
      Checkbox e
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>

   <li class = "item item-checkbox">
      Checkbox 4
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>
</ul>

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

Hộp kiểm tạo kiểu

Khi bạn muốn tạo kiểu hộp kiểm, bạn cần áp dụng bất kỳ lớp màu Ionic nào với checkboxtiếp đầu ngữ. Kiểm tra ví dụ sau để xem nó trông như thế nào. Chúng tôi sẽ sử dụng danh sách các hộp kiểm cho ví dụ này.

<ul class = "list">
   <li class = "item item-checkbox checkbox-light">
      Checkbox 1
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>

   <li class = "item item-checkbox checkbox-stable">
      Checkbox 2
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>

   <li class = "item item-checkbox  checkbox-positive">
      Checkbox 3
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>

   <li class = "item item-checkbox  checkbox-calm">
      Checkbox 4
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>

   <li class = "item item-checkbox  checkbox-balanced">
      Checkbox 5
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>

   <li class = "item item-checkbox  checkbox-energized">
      Checkbox 6
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>

   <li class = "item item-checkbox  checkbox-assertive">
      Checkbox 7
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>

   <li class = "item item-checkbox  checkbox-royal">
      Checkbox 8
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>

   <li class = "item item-checkbox  checkbox-dark">
      Checkbox 9
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>
</ul>

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