Latest web development tutorials

ionic sidebar menu

A container element contains the side menu and main content. The main content area by dragging from side to side to make the left or right side of the menu bar to switch.

Renderings are as follows:

usage

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

<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();
  };
}

API

Attributes Types of Detail
enable-menu-with-back-views
(Optional)
布尔值

In return button display, confirm whether to enable the sidebar menu.

delegate-handle String The handle is used to scroll the view of identity with $ ionicScrollDelegate.

ion-side-menu-content

A visible contents of the container body, a sibling or more ionSideMenu instructions.

usage

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

API

Attributes Types of Detail
drag-content
(Optional)
布尔值

Whether the content can be dragged. The default is true.


ion-side-menu

Sidebar menu of a container, a sibling of ion-side-menu-content instruction.

usage

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

API

Attributes Types of Detail
side 字符串

Sidebar menu currently sides. Optional values ​​are: 'left' or 'right'.

is-enabled
(Optional)
布尔值

The sidebar menu is available.

width
(Optional)
数值

Sidebar menu should be the number of pixels width. The default is 275.


menu-toggle

In a sidebar specified switching menu.

usage

Here is an example of a link in the navigation bar. Clicking on this link will automatically open a 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>

menu-close

Close the currently open sidebar menu.

usage

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

<a menu-close href="#/home" class="item">首页</a>

$ IonicSideMenuDelegate

This method directly trigger $ ionicSideMenuDelegate service, to control all the sidebar menu. Control ionSideMenus particular case with the $ getByHandle methods.

usage

<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();
  };
}

method

toggleLeft([isOpen])

Switch on the left side bar menu (if it exists).

parameter Types of Detail
isOpen
(Optional)
布尔值

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

toggleRight([isOpen])

Switch on the right side of the menu bar (if it exists).

parameter Types of Detail
isOpen
(Optional)
布尔值

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

getOpenRatio()

Get proportion Open the menu is beyond the width of the menu. For example, a menu of 100px width is a width of 50px opening ratio of 50%, the ratio will return a value of 0.5.

Return Value: 0 floating point representation has not been opened, if the left side of the menu is opened or are opening to 0-1, if the right side of the menu is opened or are opening from 0 to -1.

isOpen()

Return value: Boolean value determines whether the left or right side of the menu is already open.

isOpenLeft()

Return Value: Boolean values in the left menu has been opened.

isOpenRight()

Return value: Boolean value if the right side of the menu is already open.

canDragContent([canDrag])
parameter Types of Detail
canDrag
(Optional)
布尔值

You can drag the content is set to open the sidebar menu.

Return value: boolean whether the content can be dragged open the sidebar menu.

$getByHandle(handle)
parameter Types of Detail
handle 字符串

E.g:

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