Ionic工具栏

工具栏是通用栏, 在应用程序中用作标题, 子标题, 页脚或子页脚。它位于内容上方或下方。你可以在页面中添加多个工具栏, <ion-content>会相应地对其进行调整。当工具栏放置在<ion-header>内时, 它将固定在内容的顶部。另一方面, 将其放置在<ion-footer>内时, 它将固定在内容的底部。如果内容是全屏, 它将在页眉或页脚中的工具栏后面滚动。如果工具栏位于<ion-content>内, 它将随内容滚动。

Ionic工具栏包含以下组件：

Ionic头

它是一个父组件, 其中包含工具栏组件。元素必须是页面的前三个根元素之一。

Ionic页脚

它是页面底部的根组件。可以是的包装, 以确保正确调整内容区域的大小。

Ionic标题

它是设置工具栏标题的组件。

Ionic按钮

它是一个容器元素, 可以使用名为slot的属性将其放置在工具栏内。该插槽可以包含开始和结束属性。

Ionic后退按钮

单击后退按钮可用于浏览应用程序的历史记录。知道基于模式呈现什么内容以及何时基于导航堆栈显示内容是明智的。

例

本示例向你展示了工具栏中页眉和页脚的用法。

<ion-header>
  <ion-toolbar color="light">
    <ion-title>Toolbar</ion-title>
    <ion-buttons slot="primary">
      <ion-button>
        <ion-icon slot="icon-only" name="star"></ion-icon>
      </ion-button>   
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content></ion-content>

<ion-footer>
  <ion-toolbar color="light">
    <ion-title>Footer</ion-title>
    <ion-buttons slot="primary">
      <ion-button>
        <ion-icon slot="icon-only" name="search"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>

输出：

例

本示例说明了内部元素的使用。

<ion-header>
  <ion-toolbar color="light">
    <ion-title>ToolbarInContent</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen>
  <ion-toolbar>
    <ion-title>Default</ion-title>
  </ion-toolbar>

  <ion-toolbar color="primary">
    <ion-title>Primary</ion-title>
  </ion-toolbar>

  <ion-toolbar color="secondary">
    <ion-title>Secondary</ion-title>
  </ion-toolbar>

  <ion-toolbar color="success">
    <ion-title>Success</ion-title>
  </ion-toolbar>

  <ion-toolbar color="warning">
    <ion-title>Warning</ion-title>
  </ion-toolbar>

  <ion-toolbar>
    <ion-buttons slot="secondary">
      <ion-button>Messages (1)</ion-button>
    </ion-buttons>

    <ion-title>Buttons</ion-title>

    <ion-buttons slot="primary">
      <ion-button>Log Out</ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-content>

输出：

例

本示例向你展示and元素与element的结合使用。

<ion-header>
  <ion-toolbar color="light">
    <ion-searchbar (input)="getItems($event)"></ion-searchbar>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-toolbar>
    <ion-segment>
      <ion-segment-button value="new">
        ON
      </ion-segment-button>
      <ion-segment-button value="hot">
        OFF
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-content>

输出：