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

搜索栏标题

1 个答案: