gadin gadin - 1 year ago 68
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


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
function, if that is incorrect let me know.

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

Answer Source
<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">

The above will toggle the search bar every time you click the button. Use CSS transitions to animate it.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download