Ionic标签

Ionic标签 大部分时间用于移动导航。样式针对不同平台进行了优化。这意味着在Android设备上，选项卡将放置在屏幕顶部，而在IOS上它将位于底部。有不同的方法来创建标签。我们将详细了解如何在本章中创建选项卡。

简单的标签

可以使用 选项卡 类创建“简单选项卡”菜单。对于使用此类的inside元素，我们需要添加 tab-item 元素。由于标签通常用于导航，因此我们将使用 标签作为标签项。以下示例显示了一个包含四个选项卡的菜单。

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

添加图标

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选项卡图标

您还可以一起添加图标和文本。所述 凸片图标顶部 和 翼片图标向左 是将放置上方或分别在左侧的图标类。实现与上面给出的示例相同，我们将添加一个我们想要使用的新类和文本。以下示例显示放置在文本上方的图标。

<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标签图标Tob

条纹标签

可以通过使用 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>

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

Ionic标签条