ion-toolbar

概要(CONTENTS)

Ionic4项目中我们可以使用Ionic4导航条组件ion-toolbar对项目进行布局。ion-toolbar中有ionic ion-toolbar 用法(Usage) ,ionic ion-toolbar 属性(Properties) ,ionic ion-toolbar 中的CSS 自定义属性等

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)

angular javascript
<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 toggleion-title>
ion-toolbar>

<ion-toolbar>
  <ion-buttons slot="primary">
    <ion-button onclick="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 auto-hide="false">ion-menu-button>
  ion-buttons>
ion-toolbar>

<ion-toolbar>
  <ion-buttons slot="primary">
    <ion-button onclick="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 属性(Properties)

color

Description

The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming.

Attribute color
Type string | undefined

mode

Description

The mode determines which platform styles to use.

Attribute mode
Type "ios" | "md"

ion-toolbar中的CSS 自定义属性

Name Description
--background Background of the toolbar
--border-color Color of the toolbar border
--border-style Style of the toolbar border
--border-width Width of the toolbar border
--color Color of the toolbar text
--min-height Minimum height of the toolbar
--opacity Opacity of the toolbar background
--padding-bottom Bottom padding of the toolbar
--padding-end End padding of the toolbar
--padding-start Start padding of the toolbar
--padding-top Top padding of the toolbar