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提供了向选项卡添加图标的类。如果您希望选项卡包含没有任何文本 的图标, 则应在 选项卡 类之后添加 仅限制表符图标的 类。当然,您需要添加要显示的图标。
<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>
上面的代码将生成以下屏幕 -
您还可以一起添加图标和文本。所述 凸片图标顶部 和 翼片图标向左 是将放置上方或分别在左侧的图标类。实现与上面给出的示例相同,我们将添加一个我们想要使用的新类和文本。以下示例显示放置在文本上方的图标。
<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>
上面的代码将生成以下屏幕 -