Учебники

Ionic — Выбрать

Сентябрь 12, 2018

Ionic Select создаст простое меню с опциями выбора для выбора пользователем. Это меню выбора будет выглядеть по-разному на разных платформах, так как его стиль обрабатывается браузером.

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

Сначала мы создадим метку и добавим элемент input-input и item-select классы. Второй класс добавит дополнительный стиль в форму выбора, а затем мы добавим внутри класс input-label, который будет использоваться для добавления имени в наш элемент select. Мы также добавим выбор с опцией внутри. Это обычный элемент выбора HTML5. В следующем примере показан Ionic Select с тремя вариантами. 

<label class = "item item-input item-select">
   <div class = "input-label">
      Select
   </div>
	
   <select>
      <option>Option 1</option>
      <option selected>Option 2</option>
      <option>Option 3</option>
   </select>
</label>

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

Ionic Select

Выбор стиля

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

<div class = "list">
   <label class = "item item-input item-select item-light">
      <div class = "input-label">
         Select
      </div>
		
      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>

   <label class = "item item-input item-select item-stable">
      <div class = "input-label">
         Select
      </div>
		
      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>

   <label class = "item item-input item-select item-positive">
      <div class = "input-label">
         Select
      </div>
		
      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>

   <label class = "item item-input item-select item-calm">
      <div class = "input-label">
         Select
      </div>
		
      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>

   <label class = "item item-input item-select item-balanced">
      <div class = "input-label">
         Select
      </div>
		
      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>

   <label class = "item item-input item-select item-energized">
      <div class = "input-label">
         Select
      </div>
		
      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>

   <label class = "item item-input item-select item-assertive">
      <div class = "input-label">
         Select
      </div>
		
      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>

   <label class = "item item-input item-select item-royal">
      <div class = "input-label">
         Select
      </div>
		
      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>

   <label class = "item item-input item-select item-dark">
      <div class = "input-label">
         Select
      </div>
		
      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>
</div>

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

48
Share: