Ionic选项卡tab

本文概述

• 添加图标
• 标签徽章

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

你也可以将<ion-tabs>和<ion-tab-bar>用作独立元素。两者都不相互依赖, 但是可以一起使用以实现行为类似于本机应用程序的基于选项卡的导航。 <ion-tab-bar>组件需要将一个插槽投影到<ion-tabs>组件中的正确位置。

Ionic标签栏

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

Ionic标签按钮

它是一个UI组件, 位于选项卡栏的内部。它指定图标和标签的布局, 并连接到选项卡视图。

简单标签

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

例

<ion-header>
  <ion-toolbar>
    <ion-title>
      Tabs Example
    </ion-title>
  </ion-toolbar>
</ion-header>
   
<ion-content class="padding" >
  <ion-tabs>
    <ion-tab-bar slot="top" color="light">
      <ion-tab-button tab="speakers">
        <ion-label>Speakers</ion-label>
      </ion-tab-button>
      
      <ion-tab-button tab="map">
        <ion-label>Contact</ion-label>
      </ion-tab-button>
      
      <ion-tab-button tab="about">
        <ion-label>About</ion-label>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>
</ion-content>

输出量

添加图标

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

例

<ion-header>
    <ion-toolbar>
      <ion-title>
        Tabs Example
      </ion-title>
    </ion-toolbar>
  </ion-header>
     
  <ion-content class="padding" color="light">
    <ion-tabs>
      <ion-tab-bar slot="top">
        <ion-tab-button tab="contact">
          <ion-icon name="contacts"></ion-icon>
          <ion-label>Contact</ion-label>
        </ion-tab-button>
        
        <ion-tab-button tab="map">
          <ion-icon name="map"></ion-icon>
          <ion-label>Map</ion-label>
        </ion-tab-button>
        
        <ion-tab-button tab="about">
          <ion-icon name="information-circle"></ion-icon>
          <ion-label>About</ion-label>
        </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs>
  </ion-content>

输出量

标签徽章

它是一个包含数字或任何其他字符的属性。它可以用作通知, 告诉你有一个与元素关联的附加项目, 并指示关联了多少个项目。

例

<ion-header>
    <ion-toolbar>
      <ion-title>
        Tabs Example
      </ion-title>
    </ion-toolbar>
  </ion-header>
     
  <ion-content class="padding">
    <ion-tabs>
      <ion-tab-bar slot="bottom" color="light">
        <ion-tab-button tab="contact">
          <ion-icon name="contacts"></ion-icon>
          <ion-label>Contact</ion-label>
          <ion-badge>6</ion-badge>
        </ion-tab-button>
        
        <ion-tab-button tab="map">
          <ion-icon name="map"></ion-icon>
          <ion-label>Map</ion-label>
        </ion-tab-button>
        
        <ion-tab-button tab="mail">
          <ion-icon name="mail"></ion-icon>
          <ion-label>Mail</ion-label>
          <ion-badge>10</ion-badge>
        </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs>
  </ion-content>

输出量