ionic 侧栏菜单

一个容器元素包含侧边菜单和主要内容。通过把主要内容区域从一边拖动到另一边，来让左侧或右侧的侧栏菜单进行切换。

效果图如下所示：

用法

如果想用侧栏菜单，页面结构里需要先放一个父级容器，中间的主内容区域用 ，再配上一个或多个 指令，这样整个侧栏菜单结构才算完整。

function ContentController($scope, $ionicSideMenuDelegate) {
  $scope.toggleLeft = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };
}

API

ion-side-menu-content

一个可见主体内容的容器，同级的一个或多个ionSideMenu 指令。

用法

API

ion-side-menu

一个侧栏菜单的容器，同级的一个ion-side-menu-content 指令。

用法

API

menu-toggle

在一个指定的侧栏中切换菜单。

用法

下面是一个在导航栏内链接的例子。点击此链接会自动打开指定的侧栏菜单。

  
   
  
 ...

menu-close

关闭当前打开的侧栏菜单。

用法

下面是一个在导航栏内链接的例子。点击此链接会自动打开指定的侧栏菜单。

首页

$ionicSideMenuDelegate

这种做法本质上是直接调用$ionicSideMenuDelegate服务，对所有侧栏菜单进行统一控制；如果只想在特定场景下操作某一个ionSideMenus，就可以通过$getByHandle方法来精准处理。

用法

  
    
      内容!
      
        切换左侧侧栏菜单
      
    
    
      左侧菜单!
    
  

function MainCtrl($scope, $ionicSideMenuDelegate) {
  $scope.toggleLeftSideMenu = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };
}

方法

toggleLeft([isOpen])

切换左侧侧栏菜单（如果存在）。

toggleRight([isOpen])

切换右侧侧栏菜单（如果存在）。

getOpenRatio()

获取打开菜单内容超出菜单宽度的比例。比如，一个宽度为100px的菜单被宽度为50px以50%的比例打开，将会返回一个比例值为0.5。

返回值: 浮点 0 表示没被打开，如果左侧菜单处于已打开或正在打开为0 到 1，如果右侧菜单处于已打开或正在打开为0 到-1。

isOpen()

返回值: 布尔值，判断左侧或右侧菜单是否已经打开。

isOpenLeft()

返回值: 布尔值左侧菜单是否已经打开。

isOpenRight()

返回值: 布尔值右侧菜单是否已经打开。

canDragContent([canDrag])

返回值: 布尔值，是否可以拖动内容打开侧栏菜单。

$getByHandle(handle)

例如:

$ionicSideMenuDelegate.$getByHandle('my-handle').toggleLeft();