mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-21 04:53:58 +08:00
add swipeEnabled input to menu to set default swipeable of side menu. add swipeEnable() api to enable disable particular side menu swipeable
This commit is contained in:
@ -96,7 +96,8 @@ import {MenuType} from './menu-types';
|
|||||||
host: {
|
host: {
|
||||||
'role': 'navigation',
|
'role': 'navigation',
|
||||||
'[attr.side]': 'side',
|
'[attr.side]': 'side',
|
||||||
'[attr.type]': 'type'
|
'[attr.type]': 'type',
|
||||||
|
'[attr.swipeEnabled]': 'swipeEnabled'
|
||||||
},
|
},
|
||||||
template: '<ng-content></ng-content><div tappable disable-activated class="backdrop"></div>',
|
template: '<ng-content></ng-content><div tappable disable-activated class="backdrop"></div>',
|
||||||
directives: [forwardRef(() => MenuBackdrop)]
|
directives: [forwardRef(() => MenuBackdrop)]
|
||||||
@ -110,6 +111,7 @@ export class Menu extends Ion {
|
|||||||
|
|
||||||
isOpen: boolean = false;
|
isOpen: boolean = false;
|
||||||
isEnabled: boolean = true;
|
isEnabled: boolean = true;
|
||||||
|
isSwipeEnabled: boolean = true;
|
||||||
backdrop: MenuBackdrop;
|
backdrop: MenuBackdrop;
|
||||||
onContentClick: EventListener;
|
onContentClick: EventListener;
|
||||||
|
|
||||||
@ -117,6 +119,7 @@ export class Menu extends Ion {
|
|||||||
@Input() id: string;
|
@Input() id: string;
|
||||||
@Input() side: string;
|
@Input() side: string;
|
||||||
@Input() type: string;
|
@Input() type: string;
|
||||||
|
@Input() swipeEnabled: string;
|
||||||
@Input() maxEdgeStart;
|
@Input() maxEdgeStart;
|
||||||
|
|
||||||
@Output() opening: EventEmitter<any> = new EventEmitter();
|
@Output() opening: EventEmitter<any> = new EventEmitter();
|
||||||
@ -150,6 +153,10 @@ export class Menu extends Ion {
|
|||||||
}
|
}
|
||||||
self._renderer.setElementAttribute(self._elementRef, 'side', self.side);
|
self._renderer.setElementAttribute(self._elementRef, 'side', self.side);
|
||||||
|
|
||||||
|
if (self.swipeEnabled === 'false') {
|
||||||
|
self.isSwipeEnabled = false;
|
||||||
|
}
|
||||||
|
|
||||||
if (!self.id) {
|
if (!self.id) {
|
||||||
// Auto register
|
// Auto register
|
||||||
self.id = self.side + 'Menu';
|
self.id = self.side + 'Menu';
|
||||||
@ -244,7 +251,7 @@ export class Menu extends Ion {
|
|||||||
*/
|
*/
|
||||||
setProgressStart() {
|
setProgressStart() {
|
||||||
// user started swiping the menu open/close
|
// user started swiping the menu open/close
|
||||||
if (this._isPrevented() || !this.isEnabled) return;
|
if (this._isPrevented() || !this.isEnabled || !this.isSwipeEnabled) return;
|
||||||
|
|
||||||
this._before();
|
this._before();
|
||||||
|
|
||||||
@ -256,7 +263,7 @@ export class Menu extends Ion {
|
|||||||
*/
|
*/
|
||||||
setProgess(value) {
|
setProgess(value) {
|
||||||
// user actively dragging the menu
|
// user actively dragging the menu
|
||||||
if (this.isEnabled) {
|
if (this.isEnabled && this.isSwipeEnabled) {
|
||||||
this._prevent();
|
this._prevent();
|
||||||
this._getType().setProgess(value);
|
this._getType().setProgess(value);
|
||||||
this.opening.next(value);
|
this.opening.next(value);
|
||||||
@ -268,7 +275,7 @@ export class Menu extends Ion {
|
|||||||
*/
|
*/
|
||||||
setProgressEnd(shouldComplete) {
|
setProgressEnd(shouldComplete) {
|
||||||
// user has finished dragging the menu
|
// user has finished dragging the menu
|
||||||
if (this.isEnabled) {
|
if (this.isEnabled && this.isSwipeEnabled) {
|
||||||
this._prevent();
|
this._prevent();
|
||||||
this._getType().setProgressEnd(shouldComplete).then(isOpen => {
|
this._getType().setProgressEnd(shouldComplete).then(isOpen => {
|
||||||
this._after(isOpen);
|
this._after(isOpen);
|
||||||
@ -371,6 +378,16 @@ export class Menu extends Ion {
|
|||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Used to enable or disable the ability to swipe open the menu.
|
||||||
|
* @param {boolean} shouldEnable True if it should be swipe-able, false if not.
|
||||||
|
* @return {Menu} Returns the instance of the menu, which is useful for chaining.
|
||||||
|
*/
|
||||||
|
swipeEnable(shouldEnable) {
|
||||||
|
this.isSwipeEnabled = shouldEnable;
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
|
35
ionic/components/menu/test/disable-swipe/index.ts
Normal file
35
ionic/components/menu/test/disable-swipe/index.ts
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
import {App, IonicApp, Page, NavController} from 'ionic/ionic';
|
||||||
|
|
||||||
|
@Page({
|
||||||
|
templateUrl: 'page1.html'
|
||||||
|
})
|
||||||
|
class Page1 {
|
||||||
|
leftMenuSwipeEnabled: boolean = true;
|
||||||
|
rightMenuSwipeEnabled: boolean = false;
|
||||||
|
|
||||||
|
constructor(app: IonicApp) {
|
||||||
|
this.app = app;
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleLeftMenuSwipeable() {
|
||||||
|
this.leftMenuSwipeEnabled = !this.leftMenuSwipeEnabled;
|
||||||
|
|
||||||
|
this.app.getComponent('leftMenu').swipeEnable(this.leftMenuSwipeEnabled);
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleRightMenuSwipeable() {
|
||||||
|
this.rightMenuSwipeEnabled = !this.rightMenuSwipeEnabled;
|
||||||
|
|
||||||
|
this.app.getComponent('rightMenu').swipeEnable(this.rightMenuSwipeEnabled);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@App({
|
||||||
|
templateUrl: 'main.html'
|
||||||
|
})
|
||||||
|
class E2EApp {
|
||||||
|
constructor() {
|
||||||
|
this.rootView = Page1;
|
||||||
|
}
|
||||||
|
}
|
40
ionic/components/menu/test/disable-swipe/main.html
Normal file
40
ionic/components/menu/test/disable-swipe/main.html
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
<ion-menu [content]="content" id="leftMenu" side="left">
|
||||||
|
|
||||||
|
<ion-toolbar secondary>
|
||||||
|
<ion-title>Left Menu</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
|
||||||
|
<ion-content>
|
||||||
|
|
||||||
|
<ion-list>
|
||||||
|
|
||||||
|
<button ion-item>
|
||||||
|
Left Item 1
|
||||||
|
</button>
|
||||||
|
|
||||||
|
</ion-list>
|
||||||
|
</ion-content>
|
||||||
|
|
||||||
|
</ion-menu>
|
||||||
|
|
||||||
|
|
||||||
|
<ion-menu [content]="content" id="rightMenu" side="right" swipeEnabled="false">
|
||||||
|
|
||||||
|
<ion-toolbar danger>
|
||||||
|
<ion-title>Right Menu</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
|
||||||
|
<ion-content>
|
||||||
|
|
||||||
|
<ion-list>
|
||||||
|
|
||||||
|
<button ion-item>
|
||||||
|
Right Item 1
|
||||||
|
</button>
|
||||||
|
|
||||||
|
</ion-list>
|
||||||
|
</ion-content>
|
||||||
|
|
||||||
|
</ion-menu>
|
||||||
|
|
||||||
|
<ion-nav id="nav" [root]="rootView" #content swipe-back-enabled="false"></ion-nav>
|
33
ionic/components/menu/test/disable-swipe/page1.html
Normal file
33
ionic/components/menu/test/disable-swipe/page1.html
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
<ion-navbar *navbar>
|
||||||
|
|
||||||
|
<button menuToggle="leftMenu">
|
||||||
|
<ion-icon name="menu"></ion-icon>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<ion-title>
|
||||||
|
Main
|
||||||
|
</ion-title>
|
||||||
|
|
||||||
|
<button menuToggle="rightMenu" right secondary>
|
||||||
|
<ion-icon name="menu"></ion-icon>
|
||||||
|
</button>
|
||||||
|
</ion-navbar>
|
||||||
|
|
||||||
|
|
||||||
|
<ion-content padding>
|
||||||
|
|
||||||
|
<h3>Page 1</h3>
|
||||||
|
|
||||||
|
<p>Left Menu Swipe Enabled: {{ leftMenuSwipeEnabled }}</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<button (click)="toggleLeftMenuSwipeable()">Toggle Left Menu Swipeable</button>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>Right Menu Swipe Enabled: {{ rightMenuSwipeEnabled }}</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<button (click)="toggleRightMenuSwipeable()">Toggle Right Menu Swipeable</button>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</ion-content>
|
Reference in New Issue
Block a user