Учебники

Ionic — Range

Сентябрь 12, 2018

Ионный диапазон используется для выбора и отображения уровня чего-либо. Он будет представлять фактическое значение в соотношении с максимальным и минимальным значением. Ionic предлагает простой способ работы с Range.

Используя Диапазон

Диапазон используется в качестве внутреннего элемента элемента. Класс, который используется, это диапазон . Мы разместим этот класс после класса элемента . Это подготовит контейнер, в котором будет размещен диапазон. После создания контейнера нам нужно добавить входные данные и присвоить ему тип диапазона, а также атрибут name . 

<div class = "item range">
   <input type = "range" name = "range1">
</div>

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

Ионный диапазон

Добавление иконок

Диапазон обычно требует значков для четкого отображения данных. Нам просто нужно добавить значки до и после ввода диапазона, чтобы разместить их с обеих сторон элемента диапазона. 

<div class = "item range">
   <i class = "icon ion-volume-low"></i>
   <input type = "range" name = "volume">
   <i class = "icon ion-volume-high"></i>
</div>

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

Иконки ионного диапазона

Диапазон укладки

Наш следующий пример покажет вам, как стилизовать Range с помощью ионных цветов. Цветовые классы будут использовать префикс диапазона . Мы создадим список из девяти диапазонов и по-разному его оформим. 

<div class = "list">
   <div class = "item range range-light">
      <input type = "range" name = "volume">
   </div>
	
   <div class = "item range range-stable">
      <input type = "range" name = "volume">
   </div>
	
   <div class = "item range range-positive">
      <input type = "range" name = "volume">
   </div>
	
   <div class = "item range range-calm">
      <input type = "range" name = "volume">
   </div>
	
   <div class = "item range range-balanced">
      <input type = "range" name = "volume">
   </div>
	
   <div class = "item range range-energized">
      <input type = "range" name = "volume">
   </div>
	
   <div class = "item range range-assertive">
      <input type = "range" name = "volume">
   </div>
	
   <div class = "item range range-royal">
      <input type = "range" name = "volume">
   </div>
	
   <div class = "item range range-dark">
      <input type = "range" name = "volume">
   </div>
</div>

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

46
Share: