Tab

ion-tab

ion-tab 组件 和 ion-tabs一起使用。 每一个ion-tab 都是一个 NavController 。基本上，每个选项卡都是一个导航控制器。

用法

<ion-tabs>
 <ion-tab [root]="chatRoot" tabTitle="Chat" tabIcon="chat"></ion-tab>
</ion-tabs>

import { ChatPage } from '../chat/chat';

export class Tabs {
  // here we'll set the property of chatRoot to
  // the imported class of ChatPage
  chatRoot = ChatPage;

  constructor() {

  }
}

有时，希望调用方法而不是导航到新页面。当选择选项卡时，您可以使用(ionSelect)事件在类中调用一个方法。下面是一个从选项卡中呈现模式的例子。

<ion-tabs>
  <ion-tab (ionSelect)="chat()" tabTitle="Show Modal"></ion-tab>
</ion-tabs>pop

export class Tabs {
  constructor(public modalCtrl: ModalController) {

  }

  chat() {
    let modal = this.modalCtrl.create(ChatPage);
    modal.present();
  }
}

实例成员

goToRoot()

属性

属性	类型	详解
enabled	boolean	如果是true，启用选项卡。如果false，则用户不能与此元素交互。默认值: true
root	Page	设置 root page
rootParams	object	传递参数。
show	boolean	如果是true，选项卡按钮在选项卡中可见。默认值:true。
tabBadge	string	tab按钮的徽章。
tabBadgeStyle	string	tab按钮的徽章颜色。
tabIcon	string	tab按钮的图标
tabTitle	string	tab按钮的文字
tabUrlPath	string	URL路径名在URL中表示此选项卡。
tabsHideOnSubPages	boolean	如果是true，隐藏自页面的tab。

输出事件

属性	详解
ionSelect	在选择当前选项卡时发出。

Sass Variables

查询地址