Учебники

Ionic — Toggle

Сентябрь 12, 2018

Иногда пользователям доступны два варианта. Самый эффективный способ справиться с этой ситуацией — это переключать формы. Ionic предоставляет нам классы для элементов переключения, которые анимированы и просты в реализации.

Использование Toggle

Переключение может быть реализовано с использованием двух классов Ionic. Во-первых, нам нужно создать метку по той же причине, что мы объяснили в предыдущей главе, и назначить ей класс переключения .

Внутри будет создан наш лейбл , Вы заметите еще два ионных класса, используемых в следующем примере. Класс track добавит фоновый стиль к нашему флажку и цветную анимацию при нажатии на переключатель. Класс handle используется для добавления к нему круговой кнопки.

В следующем примере показаны две формы переключения. Первый проверен, второй нет. 

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

Приведенный выше код создаст следующий экран —

Ionic Toggle

Несколько переключателей

В большинстве случаев, когда вы хотите добавить в Ionic более одного элемента одного типа, лучше всего использовать элементы списка. Класс, который используется для нескольких переключателей, является переключателем элемента . В следующем примере показано, как создать список для переключателей. Первый и второй проверены. 

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

Приведенный выше код создаст следующий экран —

Список ионных переключателей

Toggle Styling

Все классы ионных цветов могут быть применены к элементу переключения. Префикс будет переключателем . Мы применим это к элементу метки . В следующем примере показаны все примененные цвета. 

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

Приведенный выше код создаст следующий экран —

46
Share: