The best ionic sidebar menu Tutorial In 2024, In this tutorial you can learn ion-side-menu-content,ion-side-menu,menu-toggle,menu-close,$ IonicSideMenuDelegate,
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:
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(); }; }
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. |
A visible contents of the container body, a sibling or more ionSideMenu instructions.
<ion-side-menu-content drag-content="true"> </ion-side-menu-content>
Attributes | Types of | Detail |
---|---|---|
drag-content (Optional) | 布尔值 | Whether the content can be dragged. The default is true. |
Sidebar menu of a container, a sibling of ion-side-menu-content instruction.
<ion-side-menu side="left" width="myWidthValue + 20" is-enabled="shouldLeftSideMenuBeEnabled()"> </ion-side-menu>
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. |
In a sidebar specified switching menu.
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>
Close the currently open sidebar menu.
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>
This method directly trigger $ ionicSideMenuDelegate service, to control all the sidebar menu. Control ionSideMenus particular case with the $ getByHandle methods.
<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(); }; }
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();