Ionic - Chuyển đổi

Đôi khi có hai tùy chọn có sẵn cho người dùng. Cách hiệu quả nhất để xử lý tình huống này là thông qua các biểu mẫu chuyển đổi. Ionic cung cấp cho chúng tôi các lớp để chuyển đổi các yếu tố hoạt hình và dễ thực hiện.

Sử dụng Toggle

Chuyển đổi có thể được thực hiện bằng cách sử dụng hai lớp Ionic. Đầu tiên, chúng ta cần tạolabel vì lý do tương tự mà chúng tôi đã giải thích trong chương trước và chỉ định toggle lớp với nó.

Bên trong nhãn của chúng tôi sẽ được tạo . Bạn sẽ nhận thấy thêm hai lớp ion được sử dụng trong ví dụ sau. Cáctracklớp sẽ thêm kiểu nền vào hộp kiểm và hoạt ảnh màu của chúng ta khi chạm vào nút bật tắt. Cáchandle lớp được sử dụng để thêm một nút vòng tròn vào nó.

Ví dụ sau đây cho thấy hai hình thức chuyển đổi. Cái đầu tiên được kiểm tra, cái thứ hai thì không.

<label class = "toggle">
   <input type = "checkbox" />
   <div class = "track">
      <div class = "handle"></div>
   </div>
</label>

<br>

<label class = "toggle">
   <input type = "checkbox" />
   <div class = "track">
      <div class = "handle"></div>
   </div>
</label>

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

Nhiều chuyển đổi

Hầu hết khi bạn muốn thêm nhiều phần tử cùng loại vào Ionic, cách tốt nhất là sử dụng các mục danh sách. Lớp được sử dụng cho nhiều chuyển đổi làitem-toggle. Ví dụ tiếp theo cho thấy cách tạo danh sách cho các chuyển đổi. Cái đầu tiên và cái thứ hai được kiểm tra.

<ul class = "list">
   <li class = "item item-toggle">
      Toggle 1
      <label class = "toggle">
         <input type = "checkbox" />
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle 2
      <label class = "toggle">
         <input type = "checkbox" />
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle 3
      <label class = "toggle">
         <input type = "checkbox" />
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle 4
      <label class = "toggle">
         <input type = "checkbox" />
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>
</ul>

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

Chuyển đổi tạo kiểu

Tất cả các lớp màu Ionic có thể được áp dụng cho phần tử bật tắt. Tiền tố sẽ làtoggle. Chúng tôi sẽ áp dụng điều này cholabelthành phần. Ví dụ sau đây cho thấy tất cả các màu được áp dụng.

<ul class = "list">
   <li class = "item item-toggle">
      Toggle Light
      <label class = "toggle  toggle-light">
         <input type = "checkbox" />
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle Stable
      <label class = "toggle toggle-stable">
         <input type = "checkbox" />
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle Positive
      <label class = "toggle toggle-positive">
         <input type = "checkbox" />
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle Calm
      <label class = "toggle toggle-calm">
         <input type = "checkbox" />
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle Balanced
      <label class = "toggle toggle-balanced">
         <input type = "checkbox" />
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle Energized
      <label class = "toggle toggle-energized">
         <input type = "checkbox" />
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle Assertive
      <label class = "toggle toggle-assertive">
         <input type = "checkbox" />
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle Royal
      <label class = "toggle  toggle-royal">
         <input type = "checkbox" />
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle Dark
      <label class = "toggle toggle-dark">
         <input type = "checkbox" />
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>
</ul>

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