Align ion-navbar elements - Ionic

0
Hello, I want to do the alignment of 3 elements (IONIC) inside an ion-navbar but I do not know how to position the elements correctly, could anyone help me? Below is the code snippet along with the image, I want to put one element in front of the other, ie first the toggle button, followed by the query bar and finally the shopping cart button.

<ion-header>

  <ion-navbar>


      <button ion-button menuToggle >
          <ion-icon name="menu"></ion-icon>
      </button>

    <ion-searchbar
      [(ngModel)]="descricao"
      (ionInput)="showVitrine()"
      (ionCancel)="showVitrine()">
    </ion-searchbar> 

    <button ion-fab mini end><ion-icon name="ios-cart-outline"></ion-icon></button>

  </ion-navbar>

</ion-header>

    
asked by anonymous 16.06.2018 / 12:56

1 answer

1

I've missed the ion-buttons end tag:

 <ion-navbar>


    <button ion-button menuToggle >
        <ion-icon name="menu"></ion-icon>
    </button>

  <ion-searchbar
    [(ngModel)]="descricao"
    (ionInput)="showVitrine()"
    (ionCancel)="showVitrine()">
  </ion-searchbar> 

  <ion-buttons end>
      <button ion-fab mini end><ion-icon name="ios-cart-outline"></ion-icon></button>
    </ion-buttons>


</ion-navbar>
    
20.06.2018 / 02:32