ionic sidebar menu


A container element contains the side menu and main content. Toggle the left or right sidebar menu by dragging the main content area from side to side.

The rendering is as follows:

3.gif

Usage

To use the sidebar menu, add a parent element <ion-side-menus> and a middle content <ion-side-menu-content>, and one or more <ion-side-menu> directives. 

<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>
rrree


API

##PropertiesTypeDetailsenable-menu-with-back-viewsdelegate-handleStringThis handle is used to identify the scroll view with $ionicScrollDelegate.
(optional)
Boolean The value confirms whether the sidebar menu is enabled when the back button is displayed.

ion-side-menu-content

A container for visible body content, one or more ionSideMenu directives at the same level.

Usage

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

API

PropertiesTypeDetailsdrag-content
(optional)
Boolean valueWhether the content can be dragged. Default is true.

ion-side-menu

A container for the side menu, an ion-side-menu-content at the same level instruction.

Usage

<ion-side-menu-content
  drag-content="true">
</ion-side-menu-content>

API

PropertiesTypeDetailssideis-enabledwidth

menu-toggle

Toggle the menu in a specified sidebar.

Usage

The following is an example of a link in the navigation bar. Clicking this link will automatically open the specified sidebar menu. 

<ion-side-menu
  side="left"
  width="myWidthValue + 20"
  is-enabled="shouldLeftSideMenuBeEnabled()">
</ion-side-menu>

menu-close

Close the currently open sidebar menu.

Usage

The following is an example of a link in the navigation bar. Clicking this link will automatically open the specified sidebar menu. 

<ion-view>
  <ion-nav-buttons side="left">
   <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
 ...
</ion-view>

$ionicSideMenuDelegate

This method directly triggers the $ionicSideMenuDelegate service to control all sidebar menus. Use the $getByHandle method to control ionSideMenus under specific circumstances.

Usage

<a menu-close href="#/home" class="item">首页</a>
<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>

Method

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

Toggle the left sidebar menu if it exists.

StringWhich side the sidebar menu is currently on. Optional values ​​are: 'left' or 'right'.

(optional)
Boolean valueWhether the sidebar menu is available.

(optional)
ValueHow many pixels wide should the sidebar menu be. The default is 275.

ParametersTypeDetails
isOpen
(Optional)
Boolean value

Whether to open or close the menu. Default: Toggle menu. 

toggleLeft([isOpen])

Toggle the right sidebar menu if it exists.

ParametersTypeDetails
isOpen
(Optional)
Boolean value

Whether to open or close the menu. Default: Toggle menu. 

toggleRight([isOpen])

Get the proportion of the open menu content exceeding the menu width. For example, a menu with a width of 100px that is opened with a width of 50px and a scale of 50% will return a scale value of 0.5.

Return value: Floating point 0 means not opened, if the left menu is open or opening, it is 0 to 1, if the right menu is open or opening, it is 0 to -1. 

getOpenRatio()

Return value: Boolean value to determine whether the left or right menu has been opened. 

isOpen()

Return value: Boolean value whether the left menu has been opened. 

isOpenLeft()

Return value: Boolean value whether the right menu has been opened. 

isOpenRight()
ParametersTypeDetails
canDrag
(Optional)
Boolean value

Sets whether content can be dragged to open the sidebar menu.

Return value: Boolean value, whether the sidebar menu can be opened by dragging the content. 

canDragContent([canDrag])
##handle #For example:
ParametersTypeDetails
String
$getByHandle(handle)

←
→