gadin gadin - 27 days ago 8
AngularJS Question

Search Bar header

I have a icon on the right of my menu bar. When a user selects that icon, I would like a search bar to slide in or just appear. I would like to use the

<ion-search-bar>
tag.

I am new to CSS or styling so this is a little advanced for me. Can anyone help me figure out how to style a search bar into my menu bar? I have it setup to use a
ng-click
function, if that is incorrect let me know.



<ion-nav-bar class="bar-positive" align-title="center">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-ios-search" ng-click="showSearchBar()">
</button>
</ion-nav-buttons>
</ion-nav-bar>




Answer
<ion-search-bar ng-if="$ctrl.showSearch"></ion-search-bar>

<button class="button button-icon button-clear ion-ios-search" ng-click="$ctrl.showSearch = !$ctrl.showSearch">
  </button>

The above will toggle the search bar every time you click the button. Use CSS transitions to animate it. http://www.w3schools.com/css/css3_transitions.asp