Ionic - 标签页

Ionic 标签页通常用于移动导航。样式针对不同平台进行了优化。这意味着在 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类之后添加tabs-icon-only类。当然，您需要添加要显示的图标。

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

以上代码将生成以下屏幕：