工具栏

工具栏是可以在应用程序中用作标题，子标题，页脚或甚至子页脚的通用栏。 由于 ion-toolbar 基于flexbox，无论您的页面中有多少工具栏，它们将被正确显示，ion-content 将相应地进行调整。

注意：通常，当与导航结合使用时，NavBar在离子头中使用。

有关更多信息，请查看API文档。

基本使用

<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>

标题

工具栏的最佳用途之一就是标题。

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons start>
      <button ion-button icon-only>
        <ion-icon name="more"></ion-icon>
      </button>
    </ion-buttons>

    <ion-title>Header</ion-title>

    <ion-buttons end>
      <button ion-button icon-only>
        <ion-icon name="search"></ion-icon>
      </button>
    </ion-buttons>

  </ion-toolbar>
</ion-header>

<ion-content>
  <p>There is a header above me!</p>
</ion-content>

效果：

改变颜色

您可以通过更改元素上的属性来更改工具栏颜色。

@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>
  `
  })

您也可以以相同的方式更改导航栏的颜色。 这将允许您在应用程序中的每个页面上使用不同的颜色导航栏。

<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>

效果：

工具栏中的按钮

按钮可以添加到页眉和页脚工具栏。 要向工具栏添加按钮，我们需要先添加一个 ion-buttons 组件。 该组件包装一个或多个按钮，并且可以给出 start 或 end 属性来控制其包含的按钮的位置：

<ion-header>
  <ion-toolbar>
    <ion-buttons start>
      <button ion-button icon-only color="royal">
        <ion-icon name="search"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>Send To...</ion-title>
    <ion-buttons end>
      <button ion-button icon-only 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 icon-right color="royal">
        Send
        <ion-icon name="send"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>

效果：

工具栏中的分隔

分段是允许用户在不同数据集之间切换的好方法。 使用以下标记将段添加到工具栏中：

<ion-header>
  <ion-toolbar>
    <ion-buttons start>
      <button ion-button icon-only>
        <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-button icon-only>
        <ion-icon name="more"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

效果：

工具栏中的搜索栏

另一个常见的设计范例是在工具栏中包含一个搜索栏。

<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>

效果：