Tabs

http://ionicframework.com/docs/v2/components/#tabs

Tabs用来设置多个Tab页。

更多信息请查看API文档。

基本用法

使用<ion-tabs>来初始化Tabs，并且为每个tab设置一个<ion-tab>：

import { Component } from '@angular/core';
import { ionicBootstrap } from 'ionic-angular';
import { Tab1 } from './tab1-page';
import { Tab2 } from './tab2-page';

@Component({
    template: `
        <ion-tabs>
            <ion-tab tabIcon="heart" [root]="tab1"></ion-tab>
        <ion-tab tabIcon="star" [root]="tab2"></ion-tab>
        </ion-tabs>`
})

class MyApp {
    tab1: any;
    tab2: any;

    constructor() {
        this.tab1 = Tab1;
        this.tab2 = Tab2;
    }
}

每个单独的Tabs都是@Components（组件）：

import { Component } from '@angular/core';

@Component({
    template: `
        <ion-header>
            <ion-navbar>
                <ion-title>Heart</ion-title>
            </ion-navbar>
        </ion-header>
        <ion-content>Tab 1</ion-content>`
})

export class Tab1 {}

@Component({
    template: `
        <ion-header>
            <ion-navbar>
                <ion-title>Star</ion-title>
            </ion-navbar>
        </ion-header>
        <ion-content>Tab 2</ion-content>`
})

export class Tab2 {}

注意每个<ion-tab>都绑定到一个[root]属性，就像之前Navigation章节中的<ion-nav>一样。这是因为每个<ion-tab>实际上都是一个Navigation Controller。这意味着每个tab都有自己的页面历史栈，并且每个注入到tab里的NavController实例都和其他tab是不同的：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
...
})

class Tab1 {
    constructor(public navCtrl: NavController) {
        // Id is 1, nav refers to Tab1
        console.log(this.nav.id)
    }
}

@Component({
...
})

class Tab2 {
    constructor(public navCtrl: NavController) {
        // Id is 2, nav refers to Tab2
        console.log(this.nav.id)
    }
}

Icon Tabs

可以使用tab-icon属性为每个tab添加一个图标，设置图标的name即可：

@Component({
    template: `
        <ion-header>
            <ion-navbar>
                <ion-title>Tabs</ion-title>
            </ion-navbar>
        </ion-header>
        <ion-content></ion-content>
        `
})

class TabContentPage {
    constructor() {}
}

@Component({
    template: `
        <ion-tabs>
            <ion-tab tabIcon="contact" [root]="tab1"></ion-tab>
            <ion-tab tabIcon="compass" [root]="tab2"></ion-tab>
            <ion-tab tabIcon="analytics" [root]="tab3"></ion-tab>
            <ion-tab tabIcon="settings" [root]="tab4"></ion-tab>
        </ion-tabs>`
})

export class TabsIconPage {
    constructor() {
        this.tab1 = TabContentPage;
        this.tab2 = TabContentPage;
        ...
    }
}

Icon and Text

使用tab-icon和tab-title来给Tab添加文本和图标：

@Component({
    template: `
        <ion-header>
            <ion-navbar>
                <ion-title>Tabs</ion-title>
            </ion-navbar>
        </ion-header>
        <ion-content></ion-content>
    `
})

class TabsTextContentPage {
 constructor() {}
}

@Component({
    template: `
        <ion-tabs>
            <ion-tab tabIcon="water" tabTitle="Water" [root]="tab1"></ion-tab>
            <ion-tab tabIcon="leaf" tabTitle="Life" [root]="tab2"></ion-tab>
            <ion-tab tabIcon="flame" tabTitle="Fire" [root]="tab3"></ion-tab>
            <ion-tab tabIcon="magnet" tabTitle="Force" [root]="tab4"></ion-tab>
        </ion-tabs>`
})

export class TabsTextPage {
    constructor() {
        this.tab1 = TabsTextContentPage;
        this.tab2 = TabsTextContentPage;
        ...
    }
}

Badges

使用tabBadge和tabBadgeStyle属性来给tab添加一个badge，可以给tabBadgeStyle设置任何color的名称：

@Component({
    template: `
        <ion-header>
            <ion-navbar>
                <ion-title>Tabs</ion-title>
            </ion-navbar>
        </ion-header>
        <ion-content></ion-content>
    `
})

class TabBadgePage {
    constructor() {}
}

@Component({
    template: `
        <ion-tabs>
            <ion-tab tabIcon="call" [root]="tabOne" tabBadge="3" tabBadgeStyle="danger"></ion-tab>
            <ion-tab tabIcon="chatbubbles" [root]="tabTwo" tabBadge="14" tabBadgeStyle="danger"></ion-tab>
            <ion-tab tabIcon="musical-notes" [root]="tabThree"></ion-tab>
        </ion-tabs>
    `
})

export class BadgesPage {
    constructor() {
        this.tabOne = TabBadgePage;
        this.tabTwo = TabBadgePage;
    }
}