feat(tabs): tabsHideOnSubPages can be modified per tab

references #8970
ionic-team · Nov 1, 2016 · 4f6a9b1 · 4f6a9b1
1 parent 5cdb70b
commit 4f6a9b1
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 8 deletions.
diff --git 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<any>, 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
@@ -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 = <NavControllerBase>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
@@ -1,7 +1,7 @@
 
 <ion-tabs preloadTabs="false" (ionChange)="onTabChange($event)">
   <ion-tab tabTitle="Recents" tabIcon="call" root="Tab1Page1" swipeBackEnabled="true"></ion-tab>
-  <ion-tab tabTitle="Favorites" tabIcon="star" root="Tab2Page1"></ion-tab>
+  <ion-tab tabTitle="Favorites" tabIcon="star" root="Tab2Page1" tabsHideOnSubPages="false"></ion-tab>
   <ion-tab tabTitle="Settings" tabIcon="settings" root="Tab3Page1"></ion-tab>
   <ion-tab tabTitle="Chat" tabIcon="chatbubbles" (ionSelect)="chat()" [show]="showTab"></ion-tab>
 </ion-tabs>