ionic sidebar menu

May 22, 2021 ionic

ionic sidebar menu

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

The effect diagram looks like this:

Usage

To use the sidebar menu, add a parent element, a parent element, a middle content, a middle content, and one or more instructions.

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

Try it out . . .

Api

Property	Type	Details
enable-menu-with-back-views (Optional)	`布尔值`	When the back button is displayed, confirm that the sidebar menu is enabled.
delegate-handle	String	The handle is used to identify a scrolling view with $ionicScrollDelegate.

ion-side-menu-content

A container of visible body content, one or more ionSideMenu instructions at the same level.

Usage

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

Api

Property	Type	Details
drag-content (Optional)	`布尔值`	Whether the content can be dragged. True by default.

ion-side-menu

A container for a sidebar menu, a ion-side-menu-content instruction of the same class.

Usage

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

Api

Property	Type	Details
side	`字符串`	Which side of the sidebar menu is currently on. Optional values are: 'left' or 'right'.
is-enabled (Optional)	`布尔值`	Whether the sidebar menu is available.
width (Optional)	`数值`	How many pixels should the sidebar menu have? The default is 275.

menu-toggle

Switch menus in a specified sidebar.

Usage

Here's an example of a link in the navigation bar. Clicking on this link automatically opens 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>

menu-close

Close the currently open sidebar menu.

Usage

Here's an example of a link in the navigation bar. Clicking on this link automatically opens the specified sidebar menu.

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

$ionicSideMenuDelegate

This method triggers the $ionic SideMenuDelegate service directly to control all sidebar menus. Control the ionSideMenus in a particular situation with the $getByHandle method.

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 the left sidebar menu, if one exists.

Parameters	Type	Details
isOpen (Optional)	`布尔值`	Whether to turn the menu on or off. Default: Switch menus.

toggleRight([isOpen])

Switch the right sidebar menu, if one exists.

Parameters	Type	Details
isOpen (Optional)	`布尔值`	Whether to turn the menu on or off. Default: Switch menus.

getOpenRatio()

Gets the proportion of open menu content that is outside the width of the menu. For example, a menu with a width of 100px is opened at 50% with a width of 50%, and a scale value of 0.5 is returned.

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

isOpen()

Return value: Boolean value to determine if the left or right menu is open.

isOpenLeft()

Return value: Whether the menu on the left side of the Boolean value has been opened.

isOpenRight()

Return value: Whether the menu on the right side of the Boolean value has been opened.

canDragContent([canDrag])

Parameters	Type	Details
canDrag (Optional)	`布尔值`	Set whether you can drag content to open the sidebar menu.

Return value: Boolean value, whether you can drag content to open the sidebar menu.

$getByHandle(handle)

Parameters	Type	Details
handle	`字符串`

For example:

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

ionic sidebar menu

Table of contents