搜索栏标题

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