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

ionic-v1
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

2 Likes
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

1 Like
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

1 Like
7

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