Ионный - вкладки

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

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

Простое меню вкладок можно создать с помощью tabsкласс. Для внутреннего элемента, который использует этот класс, нам нужно добавить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 предоставляет классы для добавления значков на вкладки. Если вы хотите, чтобы на ваших вкладках были значки без текста,tabs-icon-only класс следует добавить после tabsкласс. Конечно, вам нужно добавить значки, которые вы хотите отобразить.

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

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

Вы также можете добавлять значки и текст вместе. В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>

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

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

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

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

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

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