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> /en. </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();