ion-toolbar

概要(CONTENTS)

Ionic4项目中我们可以使用Ionic4导航条组件ion-toolbar对项目进行布局。

ion-toolbar官方文档地址:https://ionicframework.com/docs/api/toolbar

Toolbars are positioned above or below content. When a toolbar is placed in an it will appear fixed at the top of the content, and when it is in an it will appear fixed at the bottom. Fullscreen content will scroll behind a toolbar in a header or footer. When placed within an , toolbars will scroll with the content.

Buttons

Buttons placed in a toolbar should be placed inside of the element. The element can be positioned inside of the toolbar using a named slot. The below chart has a description of each slot.

Slot Description
secondary Positions element to the left of the content in ios mode, and directly to the right in md mode.
primary Positions element to the right of the content in ios mode, and to the far right in md mode.
start Positions to the left of the content in LTR, and to the right in RTL.
end Positions to the right of the content in LTR, and to the left in RTL.

Borders

In md mode, the will receive a box-shadow on the bottom, and the will receive a box-shadow on the top. In ios mode, the will receive a border on the bottom, and the will receive a border on the top. Both the md box-shadow and the ios border can be removed by adding the no-border attribute to the element.

ion-toolbar 用法(Usage)

<ion-toolbar>
  <ion-title>Title Onlyion-title>
ion-toolbar>

<ion-toolbar>
  <ion-buttons slot="start">
    <ion-back-button>ion-back-button>
  ion-buttons>
  <ion-title>Back Buttonion-title>
ion-toolbar>

<ion-toolbar>
  <ion-buttons slot="secondary">
    <ion-button>
      <ion-icon slot="icon-only" name="contact">ion-icon>
    ion-button>
    <ion-button>
      <ion-icon slot="icon-only" name="search">ion-icon>
    ion-button>
  ion-buttons>
  <ion-buttons slot="primary">
    <ion-button color="secondary">
      <ion-icon slot="icon-only" name="more">ion-icon>
    ion-button>
  ion-buttons>
  <ion-title>Default Buttonsion-title>
ion-toolbar>

<ion-toolbar>
  <ion-buttons slot="secondary">
    <ion-button fill="solid">
      <ion-icon slot="start" name="contact">ion-icon>
      Contact
    ion-button>
  ion-buttons>
  <ion-title>Solid Buttonsion-title>
  <ion-buttons slot="primary">
    <ion-button fill="solid" color="secondary">
      Help
      <ion-icon slot="end" name="help-circle">ion-icon>
    ion-button>
  ion-buttons>
ion-toolbar>

<ion-toolbar>
  <ion-buttons slot="secondary">
    <ion-button fill="outline">
      <ion-icon slot="start" name="star">ion-icon>
      Star
    ion-button>
  ion-buttons>
  <ion-title>Outline Buttonsion-title>
  <ion-buttons slot="primary">
    <ion-button color="danger" fill="outline">
      Edit
      <ion-icon slot="end" name="create">ion-icon>
    ion-button>
  ion-buttons>
ion-toolbar>

<ion-toolbar>
  <ion-buttons slot="secondary">
    <ion-button>
      Account
    ion-button>
  ion-buttons>
  <ion-buttons slot="primary">
    <ion-button color="danger">
      Edit
    ion-button>
  ion-buttons>
  <ion-title>Text Only Buttonsion-title>
ion-toolbar>

<ion-toolbar>
  <ion-buttons slot="start">
    <ion-menu-button autoHide="false">ion-menu-button>

  ion-buttons>
  <ion-buttons slot="secondary">
    <ion-button>
      <ion-icon slot="icon-only" name="star">ion-icon>
    ion-button>
  ion-buttons>
  <ion-title>Left side menu toggleion-title>
ion-toolbar>

<ion-toolbar>
  <ion-buttons slot="primary">
    <ion-button (click)="clickedStar()">
      <ion-icon slot="icon-only" name="star">ion-icon>
    ion-button>
  ion-buttons>
  <ion-title>Right side menu toggleion-title>
  <ion-buttons slot="end">
    <ion-menu-button autoHide="false">ion-menu-button>

  ion-buttons>
ion-toolbar>

<ion-toolbar>
  <ion-buttons slot="primary">
    <ion-button (click)="clickedSearch()">
      <ion-icon slot="icon-only" name="search">ion-icon>
    ion-button>
  ion-buttons>
  <ion-searchbar placeholder="Search Favorites">ion-searchbar>
ion-toolbar>

<ion-toolbar>
  <ion-segment>
    <ion-segment-button value="all" checked>
      All
    ion-segment-button>
    <ion-segment-button value="favorites">
      Favorites
    ion-segment-button>
  ion-segment>
ion-toolbar>

<ion-toolbar color="secondary">
  <ion-buttons slot="secondary">
    <ion-button>
      <ion-icon slot="icon-only" name="contact">ion-icon>
    ion-button>
    <ion-button>
      <ion-icon slot="icon-only" name="search">ion-icon>
    ion-button>
  ion-buttons>
  <ion-buttons slot="primary">
    <ion-button color="primary">
      <ion-icon slot="icon-only" name="more">ion-icon>
    ion-button>
  ion-buttons>
  <ion-title>Secondary Toolbarion-title>
ion-toolbar>

<ion-toolbar color="dark">
  <ion-buttons slot="secondary">
    <ion-button>
      <ion-icon slot="icon-only" name="contact">ion-icon>
    ion-button>
    <ion-button>
      <ion-icon slot="icon-only" name="search">ion-icon>
    ion-button>
  ion-buttons>
  <ion-buttons slot="primary">
    <ion-button color="danger">
      <ion-icon slot="icon-only" name="more">ion-icon>
    ion-button>
  ion-buttons>
  <ion-title>Dark Toolbarion-title>
ion-toolbar>
<ion-toolbar>
  <ion-title>Title Onlyion-title>
ion-toolbar>

<ion-toolbar>
  <ion-buttons slot="start">
    <ion-back-button>ion-back-button>
  ion-buttons>
  <ion-title>Back Buttonion-title>
ion-toolbar>

<ion-toolbar>
  <ion-buttons slot="secondary">
    <ion-button>
      <ion-icon slot="icon-only" name="contact">ion-icon>
    ion-button>
    <ion-button>
      <ion-icon slot="icon-only" name="search">ion-icon>
    ion-button>
  ion-buttons>
  <ion-buttons slot="primary">
    <ion-button color="secondary">
      <ion-icon slot="icon-only" name="more">ion-icon>
    ion-button>
  ion-buttons>
  <ion-title>Default Buttonsion-title>
ion-toolbar>

<ion-toolbar>
  <ion-buttons slot="secondary">
    <ion-button fill="solid">
      <ion-icon slot="start" name="contact">ion-icon>
      Contact
    ion-button>
  ion-buttons>
  <ion-title>Solid Buttonsion-title>
  <ion-buttons slot="primary">
    <ion-button fill="solid" color="secondary">
      Help
      <ion-icon slot="end" name="help-circle">ion-icon>
    ion-button>
  ion-buttons>
ion-toolbar>

<ion-toolbar>
  <ion-buttons slot="secondary">
    <ion-button fill="outline">
      <ion-icon slot="start" name="star">ion-icon>
      Star
    ion-button>
  ion-buttons>
  <ion-title>Outline Buttonsion-title>
  <ion-buttons slot="primary">
    <ion-button color="danger" fill="outline">
      Edit
      <ion-icon slot="end" name="create">ion-icon>
    ion-button>
  ion-buttons>
ion-toolbar>

<ion-toolbar>
  <ion-buttons slot="secondary">
    <ion-button>
      Account
    ion-button>
  ion-buttons>
  <ion-buttons slot="primary">
    <ion-button color="danger">
      Edit
    ion-button>
  ion-buttons>
  <ion-title>Text Only Buttonsion-title>
ion-toolbar>

<ion-toolbar>
  <ion-buttons slot="start">
    <ion-menu-button auto-hide="false">ion-menu-button>
  ion-buttons>
  <ion-buttons slot="secondary">
    <ion-button>
      <ion-icon slot="icon-only" name="star">ion-icon>
    ion-button>
  ion-buttons>
  <ion-title>Left side menu toggle