ionic-framework/demos/toolbar/main.html

<ion-toolbar>
  <ion-title>Toolbar</ion-title>
</ion-toolbar>

<ion-content>

  <ion-toolbar>
    <ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title>
  </ion-toolbar>


  <ion-toolbar>
    <ion-buttons start>
      <button>
        <ion-icon name="contact"></ion-icon>
      </button>
      <button>
        <ion-icon name="search"></ion-icon>
      </button>
    </ion-buttons>
    <ion-buttons end>
      <button secondary>
        <ion-icon name="more"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>Defaults</ion-title>
  </ion-toolbar>

  <ion-toolbar>
    <ion-buttons start>
      <button solid>
        <ion-icon name="contact"></ion-icon>
      </button>
      <button solid>
        <ion-icon name="contact"></ion-icon>
        Solid
      </button>
    </ion-buttons>
    <ion-title>Solid</ion-title>
    <ion-buttons end>
      <button solid secondary>
        Help
        <ion-icon name="help-circle"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>


  <ion-toolbar>
    <ion-buttons start>
      <button outline>
        <ion-icon name="contact"></ion-icon>
      </button>
      <button outline>
        <ion-icon name="star"></ion-icon>
        Star
      </button>
    </ion-buttons>
    <ion-buttons end>
      <button secondary outline>
        <ion-icon name="contact"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>Outline</ion-title>
  </ion-toolbar>


  <ion-toolbar>
    <ion-buttons start>
      <button>
        <ion-icon name="contact"></ion-icon>
        Clear
      </button>
    </ion-buttons>
    <ion-buttons end>
      <button>
        Edit
        <ion-icon name="create"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>Icon/Color Attr</ion-title>
  </ion-toolbar>


  <ion-toolbar>
    <button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-buttons start>
      <button>
        <ion-icon name="star"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>Left side menu toggle</ion-title>
  </ion-toolbar>


  <ion-toolbar>
  <ion-buttons end>
    <button #button1 (click)="buttonClick(button1)">
      <ion-icon name="star"></ion-icon>
    </button>
  </ion-buttons>
    <ion-title>Right side menu toggle</ion-title>
    <button menuToggle right>
      <ion-icon name="menu"></ion-icon>
    </button>
  </ion-toolbar>

  <ion-toolbar>
    <ion-buttons end>
      <button #button2 (click)="buttonClick(button2)">
        <ion-icon name="search"></ion-icon>
      </button>
    </ion-buttons>
    <ion-segment secondary>
      <ion-segment-button>
        Something
      </ion-segment-button>
      <ion-segment-button>
        Else
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>

  <ion-toolbar>
    <ion-segment>
      <ion-segment-button>
        Light
      </ion-segment-button>
      <ion-segment-button>
        Toolbar
      </ion-segment-button>
      <ion-segment-button>
        Default Segment
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>


  <style>
    .toolbar {
      border-bottom: 1px solid black;
      background: #eee !important;
    }
  </style>

</ion-content>