ion-side-menus
关联: $ionicSideMenuDelegate

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

ion-side-menu-content内部按钮或者链接添加menuClose指令可以用来关闭侧边菜单。

可以在标题menuToggle属性中添加'菜单图标'用menu-close指令来打开和关闭菜单。侧边菜单会自动隐藏在子页面,可以在enable-menu-with-back-views属性下找到。

默认情况下,菜单是隐藏的可以通过左右滑动或者按钮切换显示隐藏菜单。但另外情况可以通过给ionSideMenu元素添加exposeAsideWhen属性指定菜单在什么情况下才允许显示。

Side Menu

了解更多请查看:

实例该文档来自ionic中文网ionic-china

要使用侧栏菜单,添加一个父元素<ion-side-menus>,一个中间内容<ion-side-menu-content>,和一个或更多<ion-side-menu>指令。

<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-menu-content>
  <!-- 主要内容,通常 <ion-nav-view> -->
  </ion-side-menu-content>
</ion-side-menus>
function ContentController($scope, $ionicSideMenuDelegate) {
  $scope.toggleLeft = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };
}

API

属性 类型 说明
enable-menu-with-back-views
(可空)
bool

在返回按钮显示时,确认是否启用侧边栏菜单。

delegate-handle
(可空)
string

该句柄用于标识带有(ionic-china中文网文档)$ionicSideMenuDelegate的滚动视图。