mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
b69aa5485f
Ability to keep a left menu exposed on larger viewports, such as a landscape tablet. Added the `expose-aside-menu` attribute directive.
100 lines
3.1 KiB
JavaScript
100 lines
3.1 KiB
JavaScript
IonicModule
|
|
|
|
/**
|
|
* @ngdoc directive
|
|
* @name ionSideMenus
|
|
* @module ionic
|
|
* @delegate ionic.service:$ionicSideMenuDelegate
|
|
* @restrict E
|
|
*
|
|
* @description
|
|
* A container element for side menu(s) and the main content. Allows the left
|
|
* and/or right side menu to be toggled by dragging the main content area side
|
|
* to side.
|
|
*
|
|
* To automatically close an opened menu you can add the {@link ionic.directive:menuClose}
|
|
* attribute directive. Including the `menu-close` attribute is usually added to
|
|
* links and buttons within `ion-side-menu` content, so that when the element is
|
|
* clicked then the opened side menu will automatically close.
|
|
*
|
|
* By default, side menus are hidden underneath its side menu content, and can be opened by
|
|
* either swiping the content left or right, or toggling a button to show the side menu. However,
|
|
* by adding the {@link ionic.directive:exposeAsideWhen} attribute directive to an
|
|
* {@link ionic.directive:ionSideMenu} element directive, a side menu can be given instructions
|
|
* on "when" the menu should be exposed (always viewable).
|
|
*
|
|
* 
|
|
*
|
|
* For more information on side menus, check out:
|
|
*
|
|
* - {@link ionic.directive:ionSideMenuContent}
|
|
* - {@link ionic.directive:ionSideMenu}
|
|
* - {@link ionic.directive:menuClose}
|
|
* - {@link ionic.directive:exposeAsideWhen}
|
|
*
|
|
* @usage
|
|
* To use side menus, add an `<ion-side-menus>` parent element,
|
|
* an `<ion-side-menu-content>` for the center content,
|
|
* and one or more `<ion-side-menu>` directives.
|
|
*
|
|
* ```html
|
|
* <ion-side-menus>
|
|
* <!-- Center content -->
|
|
* <ion-side-menu-content ng-controller="ContentController">
|
|
* </ion-side-menu-content>
|
|
*
|
|
* <!-- Left menu -->
|
|
* <ion-side-menu side="left">
|
|
* </ion-side-menu>
|
|
*
|
|
* <!-- Right menu -->
|
|
* <ion-side-menu side="right">
|
|
* </ion-side-menu>
|
|
* </ion-side-menus>
|
|
* ```
|
|
* ```js
|
|
* function ContentController($scope, $ionicSideMenuDelegate) {
|
|
* $scope.toggleLeft = function() {
|
|
* $ionicSideMenuDelegate.toggleLeft();
|
|
* };
|
|
* }
|
|
* ```
|
|
*
|
|
* @param {string=} delegate-handle The handle used to identify this side menu
|
|
* with {@link ionic.service:$ionicSideMenuDelegate}.
|
|
*
|
|
*/
|
|
.directive('ionSideMenus', ['$document', function($document) {
|
|
|
|
var ASIDE_OPEN_CSS = 'aside-open';
|
|
|
|
return {
|
|
restrict: 'ECA',
|
|
controller: '$ionicSideMenus',
|
|
compile: function(element, attr) {
|
|
attr.$set('class', (attr['class'] || '') + ' view');
|
|
|
|
return { pre: prelink };
|
|
function prelink($scope) {
|
|
var bodyClassList = $document[0].body.classList;
|
|
|
|
$scope.$on('$ionicExposeAside', function(evt, isAsideExposed){
|
|
if(!$scope.$exposeAside) $scope.$exposeAside = {};
|
|
$scope.$exposeAside.active = isAsideExposed;
|
|
if(isAsideExposed) {
|
|
bodyClassList.add(ASIDE_OPEN_CSS);
|
|
} else {
|
|
bodyClassList.remove(ASIDE_OPEN_CSS);
|
|
}
|
|
});
|
|
|
|
$scope.$on('$destroy', function(){
|
|
bodyClassList.remove('menu-open');
|
|
bodyClassList.remove(ASIDE_OPEN_CSS);
|
|
});
|
|
|
|
}
|
|
}
|
|
};
|
|
}]);
|