diff --git a/src/components/tabs/tab.ts b/src/components/tabs/tab.ts index 6f9fd804578..32d71efb5b3 100644 --- a/src/components/tabs/tab.ts +++ b/src/components/tabs/tab.ts @@ -167,6 +167,11 @@ export class Tab extends NavControllerBase { */ btn: TabButton; + /** + * @private + */ + _tabsHideOnSubPages: boolean; + /** * @input {Page} Set the root page for this tab. */ @@ -239,6 +244,17 @@ export class Tab extends NavControllerBase { this._sbEnabled = isTrueProperty(val); } + /** + * @input {boolean} Whether it's possible to swipe-to-go-back on this tab or not. + */ + @Input() + get tabsHideOnSubPages(): boolean { + return this._tabsHideOnSubPages; + } + set tabsHideOnSubPages(val: boolean) { + this._tabsHideOnSubPages = isTrueProperty(val); + } + /** * @output {Tab} Method to call when the current tab is selected */ @@ -262,7 +278,7 @@ export class Tab extends NavControllerBase { super(parent, app, config, keyboard, elementRef, zone, renderer, cfr, gestureCtrl, transCtrl, linker); this.id = parent.add(this); - + this._tabsHideOnSubPages = config.getBoolean('tabsHideOnSubPages'); this._tabId = 'tabpanel-' + this.id; this._btnId = 'tab-' + this.id; } @@ -299,7 +315,7 @@ export class Tab extends NavControllerBase { * @private */ _viewAttachToDOM(viewCtrl: ViewController, componentRef: ComponentRef, viewport: ViewContainerRef) { - const isTabSubPage = (this.parent._subPages && viewCtrl.index > 0); + const isTabSubPage = (this._tabsHideOnSubPages && viewCtrl.index > 0); if (isTabSubPage) { viewport = this.parent.portal; diff --git a/src/components/tabs/tabs.ts b/src/components/tabs/tabs.ts index c9ffdea69d5..4f0022f4b63 100644 --- a/src/components/tabs/tabs.ts +++ b/src/components/tabs/tabs.ts @@ -130,9 +130,9 @@ import { ViewController } from '../../navigation/view-controller'; * } *``` * - * You can also switch tabs from a child component by calling `select()` on the + * You can also switch tabs from a child component by calling `select()` on the * parent view using the `NavController` instance. For example, assuming you have - * a `TabsPage` component, you could call the following from any of the child + * a `TabsPage` component, you could call the following from any of the child * components to switch to `TabsRoot3`: * *```ts @@ -178,8 +178,6 @@ export class Tabs extends Ion implements AfterViewInit { id: string; /** @internal */ _selectHistory: string[] = []; - /** @internal */ - _subPages: boolean; /** * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`. @@ -258,7 +256,6 @@ export class Tabs extends Ion implements AfterViewInit { this.parent = parent; this.id = 't' + (++tabIds); this._sbPadding = config.getBoolean('statusbarPadding'); - this._subPages = config.getBoolean('tabsHideOnSubPages'); this.tabsHighlight = config.getBoolean('tabsHighlight'); if (this.parent) { diff --git a/src/components/tabs/test/advanced/tabs.html b/src/components/tabs/test/advanced/tabs.html index dbdbdbf7772..a64ce743457 100644 --- a/src/components/tabs/test/advanced/tabs.html +++ b/src/components/tabs/test/advanced/tabs.html @@ -1,7 +1,7 @@ - +