Ionic Sidebar Menu

From WikiOD

ionic sidebar menu[edit | edit source]

A container element contains the side menu and main content. By dragging the main content area from side to side, the sidebar menu on the left or right can be switched.

The effect diagram is as follows:

Usage[edit | edit source]

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> directives.

 <ion-side-menus>
   <ion-side-menu-content ng-controller="ContentController">
 <nowiki> </nowiki> </ion-side-menu-content>
 
   <ion-side-menu side="left">
 <nowiki> </nowiki> </ion-side-menu>
 
   <ion-side-menu side="right">
 <nowiki> </nowiki> </ion-side-menu>
 </ion-side-menus>

 function ContentController($scope, $ionicSideMenuDelegate) {
   $scope.toggleLeft = function() {
     $ionicSideMenuDelegate.toggleLeft();
   };
 }
API[edit | edit source]
Attributes Type Details
enable-menu-with-back-views

(Optional)

Boolean value When the back button is displayed, confirm whether to enable the sidebar menu.
delegate-handle String This handle is used to identify the scroll view with $ionicScrollDelegate.

ion-side-menu-content[edit | edit source]

A container for visible main content, one or more ionSideMenu commands at the same level.

Usage[edit | edit source]
 <ion-side-menu-content
   drag-content="true">
 </ion-side-menu-content>
API[edit | edit source]
Attributes Type Details
drag-content

(Optional)

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

ion-side-menu[edit | edit source]

A container for sidebar menus, an ion-side-menu-content command at the same level.

Usage[edit | edit source]
 <ion-side-menu
   side="left"
   width="myWidthValue + 20"
   is-enabled="shouldLeftSideMenuBeEnabled()">
 </ion-side-menu>
API[edit | edit source]
Attributes Type Details
side String Which side of the sidebar menu is currently on. The available values ​​are:'left' or'right'.
is-enabled

(Optional)

Boolean value Whether the sidebar menu is available.
width

(Optional)

Numerical value How many pixels the width of the sidebar menu should be. The default is 275.

Menu-toggle[edit | edit source]

Switch menus in a designated sidebar.

Usage[edit | edit source]

The following is an example of linking in the navigation bar. Clicking on this link will automatically open the designated 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[edit | edit source]

Close the currently open sidebar menu.

Usage[edit | edit source]

The following is an example of linking in the navigation bar. Clicking on this link will automatically open the designated sidebar menu.

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

$ ionic Side Menu Delegate[edit | edit source]

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

Usage[edit | edit source]
 <body ng-controller="MainCtrl">
   <ion-side-menus>
     <ion-side-menu-content>
       content!
       <button ng-click="toggleLeftSideMenu()">
         Toggle the left sidebar menu
       </button>
     </ion-side-menu-content>
     <ion-side-menu side="left">
       Menu on the left!
     <ion-side-menu>
   </ion-side-menus>
 </body>
 function MainCtrl($scope, $ionicSideMenuDelegate) {
   $scope.toggleLeftSideMenu = function() {
     $ionicSideMenuDelegate.toggleLeft();
   };
 }
Method[edit | edit source]
 toggleLeft([isOpen])

Toggle the left sidebar menu (if it exists).

Parameter Type Details
isOpen

(Optional)

Boolean value Whether to open or close the menu. Default: switch menu.
 toggleRight([isOpen])

Toggle the right sidebar menu (if it exists).

Parameter Type Details
isOpen

(Optional)

Boolean value Whether to open or close the menu. Default: switch menu.
 getOpenRatio()

Get the ratio of the open menu content exceeding the width of the menu. For example, if a menu with a width of 100px is opened at a ratio of 50% with a width of 50px, a ratio of 0.5 will be returned.

Return value: Floating point 0 means it has not been opened. If the menu on the left is opened or being opened, it is 0 to 1, and if the menu on the right is opened or being opened, it is 0 to -1.

 isOpen()

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

 isOpenLeft()

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

 isOpenRight()

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

 canDragContent([canDrag])
Parameter Type Details
canDrag

(Optional)

Boolean value Set whether you can drag content to open the sidebar menu.

Return value: Boolean value, whether the content can be dragged to open the sidebar menu.

 $getByHandle(handle)
Parameter Type Details
handle String

E.g:

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