how to create ionic3 page header with inline elements

Viewed 99

I need to create in Ionic 3 a header bar exactly like this attached wireframe, which has: a menu button, Title and search bar with rounded corners. All this in the same line. I could not put more than 2 elements on the same line.

wireframe header bar

enter image description here

script as far as I could get:

<ion-toolbar no-border-top>
  <button  ion-button icon-only menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>Titulo</ion-title>
  <ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
  <ion-list>
    <ion-item *ngFor="let item of items">
      <!-- {{ item }} -->
    </ion-item>
  </ion-list>          
</ion-toolbar>
0 Answers
Related