ionic 側邊欄實例

側邊欄的使用範例:javascript

<body >
<ion-side-menus>
  <!-- 中間內容 -->
  <ion-side-menu-content ng-controller="ContentController">
  <ion-header-bar align-title="left" class="bar-positive">
  <div class="buttons">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </div>
  <h1 class="title" style="text-align: center;">Title!</h1>
  <div class="buttons">
    <button class="button">右側按鈕</button>

  </div>

</ion-header-bar>
  </ion-side-menu-content>

  <!-- 左側菜單 -->
  <ion-side-menu side="left" width="180">
    left-side-menu
  </ion-side-menu>

  <!-- 右側菜單 -->
  <ion-side-menu side="right">
  </ion-side-menu>
</ion-side-menus>
<script type="text/javascript">
  angular.module('ionicApp',['ionic'])
  .controller('ContentController',function($scope, $ionicSideMenuDelegate){
    $scope.toggleLeft = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };
  
  });

</script>
</body>
 
相關文章
相關標籤/搜索