一個容器元素包含側邊菜單和主要內容。通過把主要內容區域從一邊拖動到另一邊,來讓左側或右側的側欄菜單進行切換。
效果圖如下所示:


用法
要使用側欄菜單,添加一個父元素,一個中間內容 ,和一個或更多 指令。
<ion-side-menus> <!-- 中間內容 --> <ion-side-menu-content ng-controller="ContentController"> </ion-side-menu-content> <!-- 左側菜單 --> <ion-side-menu side="left"> </ion-side-menu> <!-- 右側菜單 --> <ion-side-menu side="right"> </ion-side-menu> </ion-side-menus>
function ContentController($scope, $ionicSideMenuDelegate) { $scope.toggleLeft = function() { $ionicSideMenuDelegate.toggleLeft(); }; }



ion-side-menu-content
一個可見主體內容的容器,同級的一個或多個ionSideMenu 指令。
用法
<ion-side-menu-content drag-content="true"> </ion-side-menu-content>

ion-side-menu
一個側欄菜單的容器,同級的一個ion-side-menu-content 指令。
用法
<ion-side-menu side="left" width="myWidthValue + 20" is-enabled="shouldLeftSideMenuBeEnabled()"> </ion-side-menu>

menu-toggle
在一個指定的側欄中切換菜單。
用法
下面是一個在導航欄內鏈接的例子。點擊此鏈接會自動打開指定的側欄菜單。
<ion-view> <ion-nav-buttons side="left"> <button menu-toggle="left" class="button button-icon icon ion-navicon"></button> </ion-nav-buttons> ... </ion-view>
menu-close
關閉當前打開的側欄菜單。
用法
下面是一個在導航欄內鏈接的例子。點擊此鏈接會自動打開指定的側欄菜單。
<a menu-close href="#/home" class="item">首頁</a>
$ionicSideMenuDelegate
該方法直接觸發\(ionicSideMenuDelegate服務,來控制所有側欄菜單。用\)getByHandle方法控制特定情況下的ionSideMenus。
用法
<body ng-controller="MainCtrl"> <ion-side-menus> <ion-side-menu-content> 內容! <button ng-click="toggleLeftSideMenu()"> 切換左側側欄菜單 </button> </ion-side-menu-content> <ion-side-menu side="left"> 左側菜單! <ion-side-menu> </ion-side-menus> </body>
function MainCtrl($scope, $ionicSideMenuDelegate) { $scope.toggleLeftSideMenu = function() { $ionicSideMenuDelegate.toggleLeft(); }; }
方法
toggleLeft([isOpen])