Ionic 标签页

Ionic 选项卡主要用于移动导航。Ionic 选项卡的样式对于不同的操作系统是不同的。例如，在 Android 设备中它位于屏幕顶部，而在 iOS 设备中它位于底部。我们可以使用标准的 <ion-tabs> 组件来访问 Ionic 选项卡。该组件作为路由器出口来处理导航。它不提供任何在选项卡之间切换的机制。如果您需要在选项卡之间切换，请使用 <ion-tab-bar> 作为 <ion-tabs> 的直接子元素。

您还可以使用 <ion-tabs> 和 <ion-tab-bar> 作为独立元素。两者不依赖于彼此工作，但可以一起使用来实现像原生应用程序一样基于选项卡的导航。<ion-tab-bar> 组件需要一个插槽才能投影到 <ion-tabs> 组件中的正确位置。

Ion-tab-bar

它是一个包含一组选项卡按钮的 UI 组件。此选项卡必须在选项卡内部提供，才能与每个选项卡进行通信。

Ion-tab-button

它是一个放置在选项卡栏内的 UI 组件。它指定图标和标签的布局，并连接到选项卡视图。

简单选项卡

可以通过使用 <ion-tabs> 和 <ion-tab-bar> 组件创建简单的选项卡菜单。以下示例展示了如何在 Ionic 中创建选项卡。

示例

输出

添加图标

Ionic 还提供了一个 <ion-icon> 元素，用于向选项卡添加图标。我们可以通过以下示例来理解它。

示例

输出

选项卡徽章

它是一个包含数字或任何其他字符的属性。它可以作为通知，表示存在与元素关联的附加项目，并指示关联的项目数量。

示例

输出