Ion-search bar in header

Ionic Framework ionic-v3
1

hi, i am trying to add search bar in the header , thats only as an icon when clicked the searchbar should appear/expand in place of ion-header title …

image

how can I achieve this ??

.html:

   <ion-header class="shrinkable">
      <ion-navbar>
         <button ion-button menuToggle>
             <ion-icon name="menu"></ion-icon>
          </button>
         <ion-title>
            Jobs
         </ion-title>
       <ion-buttons end>
           <button ion-button end icon-only (click)="seachbar()">
               <ion-icon name="search"></ion-icon>
           </button>
        </ion-buttons>

       <ion-buttons end>
          <button ion-button end icon-only (click)="presentPopover($event)">
              <ion-icon name="more"></ion-icon>
          </button>
       </ion-buttons>

     </ion-navbar>
   </ion-header>
2 Likes
2

i was looking for this answer too

3

any one found any answer ???

4

I am not sure with the code but there is a way where u can achieve the search-bar as shown in the picture or image.

  1. Place a search-bar icon in the header and give it a button function.
  2. Create a page for the searching.
    By following these steps we can achieve the search-bar as shown in the picture.
5

Try this.

<ion-header>
<ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-icon name="menu" size="large"></ion-icon>
    </ion-buttons>
    <ion-searchbar type="text" color="light" placeholder="Search text" clearInput>
    </ion-searchbar>
    <ion-buttons slot="end">
      <ion-icon name="search" size="large"></ion-icon>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
2 Likes