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>

上述代码将在屏幕产生以下内容 −