Toolbar

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

Toolbar可以用来当做App的header，sub-header,footer,sub-footer。因为ion-toolbar基于flexbox，所以不管你在页面中放几个Toolbar，它们都能正确显示，ion-content会自动调整适应。

一般情况下，NavBar会放在ion-header里，用来配合导航。

更多内容请查看API文档。

基本用法

当把Toolbar当做footer来用的时候，可以用ion-footer来代替ion-toolbar。

<ion-header>
    <ion-toolbar>
        <ion-title>Toolbar</ion-title>
    </ion-toolbar>
</ion-header>
<ion-content></ion-content>
<ion-footer>
    <ion-toolbar>
        <ion-title>Footer</ion-title>
    </ion-toolbar>
</ion-footer>

Header

把Toolbar当做header也是一种很好的方式。

<ion-header>
    <ion-toolbar color="primary">
        <ion-buttons start>
            <ion-icon name="content"></ion-icon>
        </ion-buttons>
        <ion-title>Header</ion-title>
        <ion-buttons end>
            <ion-icon name="search"></ion-icon>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content>
    <p>There is a header above me!</p>
</ion-content>

改变颜色

可以通过设置color属性来改变toolbar的颜色。

@Component({
 template: `
    <ion-toolbar color="primary">
        <ion-title>Toolbar</ion-title>
    </ion-toolbar>
    <ion-toolbar color="secondary">
        <ion-title>Toolbar</ion-title>
    </ion-toolbar>
    <ion-toolbar color="danger">
        <ion-title>Toolbar</ion-title>
    </ion-toolbar>
    <ion-toolbar color="dark">
        <ion-title>Toolbar</ion-title>
    </ion-toolbar>
    `
 })

你也可以通过相同的方式改变Navbar的颜色。这样你就可以在不同的页面使用不同颜色的Navbar。

<ion-header>
    <ion-navbar color="dark">
        <ion-title>Dark</ion-title>
    </ion-navbar>
</ion-header>
<ion-header>
    <ion-navbar color="danger">
        <ion-title>Danger</ion-title>
    </ion-navbar>
</ion-header>
<ion-header>
    <ion-navbar color="secondary">
        <ion-title>Secondary</ion-title>
    </ion-navbar>
</ion-header>

Toolbar中的按钮

可以给header或footer添加按钮。首先需要添加ion-buttons组件，这个组件可以包含一个或多个Buttons，并且可以设置start或end属性来控制按钮的位置：

<ion-header>
    <ion-toolbar>
        <ion-buttons start>
            <button ion-button color="royal">
                <ion-icon name="search"></ion-icon>
            </button>
        </ion-buttons>
        <ion-title>Send To...</ion-title>
        <ion-buttons end>
            <button ion-button color="royal">
                <ion-icon name="person-add"></ion-icon>
            </button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content></ion-content>
<ion-footer>
    <ion-toolbar>
        <p>Ash, Misty, Brock</p>
        <ion-buttons end>
            <button ion-button color="royal">
                Send
                <ion-icon name="send"></ion-icon>
            </button>
        </ion-buttons>
    </ion-toolbar>
</ion-footer>

Toolbars中的Segment

Segment是一个允许用户在不同的数据之间切换的好方式。使用下面的代码在Toolbar中添加Segment：

<ion-header>
    <ion-toolbar>
        <ion-buttons start>
            <button>
                <ion-icon name="create"></ion-icon>
            </button>
        </ion-buttons>
        <ion-segment>
            <ion-segment-button value="new">
                New
            </ion-segment-button>
            <ion-segment-button value="hot">
                Hot
            </ion-segment-button>
        </ion-segment>
        <ion-buttons end>
            <button>
                <ion-icon name="more"></ion-icon>
            </button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>

Toolbars中的Searchbar

另一个常见的设计模式是在Toolbar中放一个Searchbar。

<ion-header>
    <ion-toolbar color="primary">
        <ion-searchbar (input)="getItems($event)"></ion-searchbar>
    </ion-toolbar>
</ion-header>
<ion-content>
    <ion-list>
        <ion-item *ngFor="let item of items">
            {{ item }}
        </ion-item>
    </ion-list>
</ion-content>