Ionic CSS - Toolbar

In Ionic Toolbar section will cover all components which use to create app toolbar like headers, footers, etc. 

 

Toolbar (ion-toolbar)

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

 

<ion-toolbar>
  <ion-title>Title Only</ion-title>
</ion-toolbar>

<ion-toolbar>
  <ion-buttons slot="start">
    <ion-back-button></ion-back-button>
  </ion-buttons>
  <ion-title>Back Button</ion-title>
</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"
    • Attribute: color
    • Type: string | undefined
  • mode
    • Description: The mode determines which platform styles to use.
    • Attribute: mode
    • Type: "ios" | "md"

 

The header is a parent component that holds the toolbar component. It's important to note that ion-header needs to be one of the three root elements of a page

 

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>Header Bar</ion-title>
  </ion-toolbar>
<ion-content></ion-content>

 

Properties 

  • mode
    • Description: The mode determines which platform styles to use.
    • Attribute: mode
    • Type: "ios" | "md"
  • translucent
    • Description: If true, the header will be translucent. Note: In order to scroll content behind the header, the fullscreen attribute needs to be set on the content.
    • Attribute: translucent
    • Type: boolean
    • Default: false

 

The ionic footer is placed at the bottom of the app screen. Working with footers is almost the same as working with headers. Footer is a root component of a page that sits at the bottom of the page. Footer can be a wrapper for ion-toolbar to make sure the content area is sized correctly.

 

<ion-content></ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-title>My Footer</ion-title>
  </ion-toolbar>
</ion-footer>

 

Properties

  • mode
    • Description: The mode determines which platform styles to use.
    • Attribute: mode
    • Type: "ios" | "md"
  • translucent
    • Description: If true, the header will be translucent. Note: In order to scroll content behind the header, the fullscreen attribute needs to be set on the content.
    • Attribute: translucent
    • Type: boolean
    • Default: false

 

Title (ion-title)

ion-title is a component that sets the title of the Toolbar.

 

<ion-header>

  <ion-toolbar>
    <ion-title>My Page Heading</ion-title>
  </ion-toolbar>

</ion-header>

 

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"
    • Attribute: color
    • Type: string | undefined