Ionic - 选项卡

离子标签大部分时间用于移动导航。样式针对不同平台进行了优化。这意味着在 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>

上面的代码将产生以下屏幕 -

离子选项卡图标

您还可以将图标和文本添加在一起。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前缀来将一些 Ionic 颜色添加到选项卡菜单中。

在下面的示例中，我们将使用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>

上面的代码将产生以下屏幕 -

离子标签条