Поиск Bar header

Question

У меня есть значок справа от моей строки меню. Когда пользователь выбирает этот значок, я бы хотел, чтобы панель поиска включалась или просто отображалась. Я хотел бы использовать тег <ion-search-bar>.

Я новичок в CSS или стиле, поэтому для меня это немного продвинуто. Может ли кто-нибудь помочь мне разобраться, как создать панель поиска в моей строке меню? У меня есть настройка для использования функции ng-click, если это неверно, дайте мне знать.

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

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

выше переключает панель поиска каждый раз, когда вы нажимаете на кнопку. Используйте CSS-переходы для анимации. http://www.w3schools.com/css/css3_transitions.asp