How to replace search icon by search field in ion nav bar


#1

Hi,

I don’t know how to add content in an ion-nav-bar. My goal is to add a search input when the user clicks on search icon such as Google apps.

Can anyone help me? :°

Example in Gmail:


Thanks


#2

I’ve been struggling with the same question for a while. Does anybody have a suggestion?


#3

Hey guys, you can something like this


#4

@mhartington Thanks! Looks like a reasonable solution, but I’m worried that behavior of state B is implemented as part of state A. I’d expect to have something similar to <ion-view title=".."> where instead of title you could provide an element or something similar to ion-nav-buttons


#5

@mhartington Thanks! But I have a second problem with this solution: the search icon doesn’t disappear instantly when I click on it (on browser and devise). Is it possible to fix it?


#6

@okens, cleaned up the codepen.

@xaka, can you explain a bit more? I’m having a hard time following


#7

Is there any way of making the search field fill the nav bar until the left menu button?