Учебники

Ионные — Вкладки

Сентябрь 12, 2018

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

Простые вкладки

Простое меню вкладок может быть создано с помощью класса вкладок . Для внутреннего элемента, который использует этот класс, нам нужно добавить элементы tab-item . Поскольку вкладки обычно используются для навигации, мы будем использовать теги <a> для элементов вкладок. В следующем примере показано меню с четырьмя вкладками. 

<div class = "tabs">
   <a class = "tab-item">
      Tab 1
   </a>
	
   <a class = "tab-item">
      Tab 2
   </a>

   <a class = "tab-item">
      Tab 3
   </a>
</div>

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

Ионные вкладки

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

Ionic предоставляет классы для добавления значков на вкладки. Если вы хотите, чтобы у ваших вкладок были значки без текста, после класса вкладок следует добавить класс только для вкладок . Конечно, вам нужно добавить значки, которые вы хотите отобразить. 

<div class = "tabs tabs-icon-only">
   <a class = "tab-item">
      <i class = "icon ion-home"></i>
   </a>
	
   <a class = "tab-item">
      <i class = "icon ion-star"></i>
   </a>
	
   <a class = "tab-item">
      <i class = "icon ion-planet"></i>
   </a>
</div>

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

Ionic Tab Icons

Вы также можете добавить значки и текст вместе. Tabs-icon-top и tabs-icon-left — это классы, которые будут размещать значок над или слева соответственно. Реализация такая же, как в приведенном выше примере, мы просто добавим новый класс и текст, который мы хотим использовать. В следующем примере показаны значки, размещенные над текстом. 

<div class = "tabs tabs-icon-top">
   <a class = "tab-item">
      <i class = "icon ion-home"></i>
      Tab 1
   </a>
	
   <a class = "tab-item">
      <i class = "icon ion-star"></i>
      Tab 2
   </a>
	
   <a class = "tab-item">
      <i class = "icon ion-planet"></i>
      Tab 3
   </a>
</div>

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

Ionic Tab Icon Top

Полосатые вкладки

Полосатые вкладки можно создать, добавив контейнер вокруг наших вкладок с помощью класса полосатых вкладок . Этот класс позволяет использовать префиксы tabs-background и tabs-color для добавления некоторых ионных цветов в меню вкладок.

В следующем примере мы будем использовать класс tabs-background-positive (blue) для оформления фона нашего меню и класс tabs-color-light (white) для стилизации значков вкладок. Обратите внимание на разницу между второй активной вкладкой и двумя другими, которые нет. 

<div class = "tabs-striped tabs-background-positive tabs-color-light">
   <div class = "tabs">
      <a class = "tab-item">
         <i class = "icon ion-home"></i>
      </a>
		
      <a class = "tab-item active">
         <i class = "icon ion-star"></i>
      </a>
		
      <a class = "tab-item">
         <i class = "icon ion-planet"></i>
      </a>
   </div>
</div>

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

39
Share: