Hello there!
I’d like to know what’s the best way to accommodate a search bar in the middle of two icons inside of an ion-nav-bar
Here’s a screen-shot to show better what I mean:
And here’s the code (taken from one of the demo apps):
<ion-view>
<ion-nav-buttons side="left">
<button class="button icon ion-navicon"></button>
</ion-nav-buttons>
<!-- Here's where I try to create my search bar -->
<ion-nav-buttons side="primary">
<label class="item item-input" style="height:36px">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" placeholder="Search" />
</label>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button icon ion-navicon"></button>
</ion-nav-buttons>
<div class="bar bar-subheader">
<h2 class="title">Sub Header</h2>
</div>
<ion-content class="has-subheader">
<div class="list card">
<div class="item item-divider">Recent Updates</div>
<div class="item item-body">
<div>
There is a fire in <b>sector 3</b>
</div>
</div>
</div>
<div class="list card">
<div class="item item-divider">Health</div>
<div class="item item-body">
<div>
You ate an apple today!
</div>
</div>
</div>
<div class="list card">
<div class="item item-divider">Upcoming</div>
<div class="item item-body">
<div>
You have <b>29</b> meetings on your calendar tomorrow.
</div>
</div>
</div>
</ion-content>
</ion-view>
So far, I still haven’t discovered the Ionic way of doing this, please help me. Thanks in advance!
Regards,
-Jose