側邊欄的使用範例: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>