Align ion-navbar elements - Ionic

Asked

Viewed 505 times

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 someone help me? Below follows the excerpt of the code along with the image, I want to put an 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>

inserir a descrição da imagem aqui

1 answer

1


lacked to put 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>
  • Very good Felipe, it worked. Thank you.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.