mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 21:48:42 +08:00
fix(tabs): swipeBackEnabled works with tabs as expected
This commit is contained in:

committed by
Adam Bradley

parent
aea866a742
commit
2bff535e7b
@ -31,7 +31,7 @@ export class NativeInput {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@HostListener('input', ['$event'])
|
@HostListener('input', ['$event'])
|
||||||
private _change(ev) {
|
private _change(ev: any) {
|
||||||
this.valueChange.emit(ev.target.value);
|
this.valueChange.emit(ev.target.value);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -41,8 +41,8 @@ export class NativeInput {
|
|||||||
|
|
||||||
self.focusChange.emit(true);
|
self.focusChange.emit(true);
|
||||||
|
|
||||||
function docTouchEnd(ev) {
|
function docTouchEnd(ev: TouchEvent) {
|
||||||
var tapped: HTMLElement = ev.target;
|
var tapped = <HTMLElement>ev.target;
|
||||||
if (tapped && self.element()) {
|
if (tapped && self.element()) {
|
||||||
if (tapped.tagName !== 'INPUT' && tapped.tagName !== 'TEXTAREA' && !tapped.classList.contains('input-cover')) {
|
if (tapped.tagName !== 'INPUT' && tapped.tagName !== 'TEXTAREA' && !tapped.classList.contains('input-cover')) {
|
||||||
self.element().blur();
|
self.element().blur();
|
||||||
@ -178,7 +178,7 @@ export class NativeInput {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function cloneInput(focusedInputEle, addCssClass) {
|
function cloneInput(focusedInputEle: any, addCssClass: string) {
|
||||||
let clonedInputEle = focusedInputEle.cloneNode(true);
|
let clonedInputEle = focusedInputEle.cloneNode(true);
|
||||||
clonedInputEle.classList.add('cloned-input');
|
clonedInputEle.classList.add('cloned-input');
|
||||||
clonedInputEle.classList.add(addCssClass);
|
clonedInputEle.classList.add(addCssClass);
|
||||||
@ -191,7 +191,7 @@ function cloneInput(focusedInputEle, addCssClass) {
|
|||||||
return clonedInputEle;
|
return clonedInputEle;
|
||||||
}
|
}
|
||||||
|
|
||||||
function removeClone(focusedInputEle, queryCssClass) {
|
function removeClone(focusedInputEle: any, queryCssClass: string) {
|
||||||
let clonedInputEle = focusedInputEle.parentElement.querySelector('.' + queryCssClass);
|
let clonedInputEle = focusedInputEle.parentElement.querySelector('.' + queryCssClass);
|
||||||
if (clonedInputEle) {
|
if (clonedInputEle) {
|
||||||
clonedInputEle.parentNode.removeChild(clonedInputEle);
|
clonedInputEle.parentNode.removeChild(clonedInputEle);
|
||||||
|
@ -1783,6 +1783,13 @@ export class NavController extends Ion {
|
|||||||
return this._views.length;
|
return this._views.length;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
isSwipeBackEnabled(): boolean {
|
||||||
|
return this._sbEnabled;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Returns the root `NavController`.
|
* Returns the root `NavController`.
|
||||||
* @returns {NavController}
|
* @returns {NavController}
|
||||||
|
@ -191,7 +191,6 @@ export class Nav extends NavController implements AfterViewInit {
|
|||||||
get swipeBackEnabled(): boolean {
|
get swipeBackEnabled(): boolean {
|
||||||
return this._sbEnabled;
|
return this._sbEnabled;
|
||||||
}
|
}
|
||||||
|
|
||||||
set swipeBackEnabled(val: boolean) {
|
set swipeBackEnabled(val: boolean) {
|
||||||
this._sbEnabled = isTrueProperty(val);
|
this._sbEnabled = isTrueProperty(val);
|
||||||
}
|
}
|
||||||
|
@ -201,6 +201,17 @@ export class Tab extends NavController {
|
|||||||
this._isShown = isTrueProperty(val);
|
this._isShown = isTrueProperty(val);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @input {boolean} Whether it's possible to swipe-to-go-back on this tab or not.
|
||||||
|
*/
|
||||||
|
@Input()
|
||||||
|
get swipeBackEnabled(): boolean {
|
||||||
|
return this._sbEnabled;
|
||||||
|
}
|
||||||
|
set swipeBackEnabled(val: boolean) {
|
||||||
|
this._sbEnabled = isTrueProperty(val);
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @output {Tab} Method to call when the current tab is selected
|
* @output {Tab} Method to call when the current tab is selected
|
||||||
*/
|
*/
|
||||||
@ -222,6 +233,10 @@ export class Tab extends NavController {
|
|||||||
|
|
||||||
parentTabs.add(this);
|
parentTabs.add(this);
|
||||||
|
|
||||||
|
if (parentTabs.rootNav) {
|
||||||
|
this._sbEnabled = parentTabs.rootNav.isSwipeBackEnabled();
|
||||||
|
}
|
||||||
|
|
||||||
this._panelId = 'tabpanel-' + this.id;
|
this._panelId = 'tabpanel-' + this.id;
|
||||||
this._btnId = 'tab-' + this.id;
|
this._btnId = 'tab-' + this.id;
|
||||||
}
|
}
|
||||||
|
@ -411,7 +411,7 @@ class Tab3Page1 {
|
|||||||
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
template: '<ion-nav [root]="root"></ion-nav>'
|
template: '<ion-nav [root]="root" swipeBackEnabled="false"></ion-nav>'
|
||||||
})
|
})
|
||||||
class E2EApp {
|
class E2EApp {
|
||||||
root = SignIn;
|
root = SignIn;
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
|
|
||||||
<ion-tabs preloadTabs="false" (ionChange)="onTabChange()">
|
<ion-tabs preloadTabs="false" (ionChange)="onTabChange()">
|
||||||
<ion-tab tabTitle="Recents" tabIcon="call" [root]="tab1Root" [rootParams]="params"></ion-tab>
|
<ion-tab tabTitle="Recents" tabIcon="call" [root]="tab1Root" [rootParams]="params" swipeBackEnabled="true"></ion-tab>
|
||||||
<ion-tab tabTitle="Favorites" tabIcon="star" [root]="tab2Root"></ion-tab>
|
<ion-tab tabTitle="Favorites" tabIcon="star" [root]="tab2Root"></ion-tab>
|
||||||
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="tab3Root"></ion-tab>
|
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="tab3Root"></ion-tab>
|
||||||
<ion-tab tabTitle="Chat" tabIcon="chatbubbles" (ionSelect)="chat()"></ion-tab>
|
<ion-tab tabTitle="Chat" tabIcon="chatbubbles" (ionSelect)="chat()"></ion-tab>
|
||||||
|
Reference in New Issue
Block a user