fix(tab-button): add a class to hide the tab when show is false

ionic-team · Jul 12, 2018 · eb9ed17 · eb9ed17
1 parent db248ef
commit eb9ed17
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 7 deletions.
diff --git a/core/src/components/tab-button/tab-button.scss b/core/src/components/tab-button/tab-button.scss
@@ -1,9 +1,10 @@
 @import "../../themes/ionic.globals";
 
 :host {
+  @include border-radius(0);
   @include margin(0);
+
   text-align: center;
-  @include border-radius(0);
 
   box-sizing: border-box;
 
@@ -42,6 +43,10 @@
   color: var(--color-selected);
 }
 
+:host(.tab-hidden) {
+  display: none;
+}
+
 a {
   text-decoration: none;
 }

diff --git a/core/src/components/tab-button/tab-button.tsx b/core/src/components/tab-button/tab-button.tsx
@@ -74,9 +74,9 @@ export class TabButton {
       'role': 'tab',
       'id': tab.btnId,
       'aria-selected': selected,
-      'hidden': !tab.show,
       class: {
         ...createColorClasses(this.color),
+        'tab-hidden': !tab.show,
         'tab-selected': selected,
         'has-label': hasLabel,
         'has-icon': hasIcon,

diff --git a/core/src/components/tabs/test/basic/index.html b/core/src/components/tabs/test/basic/index.html
@@ -14,7 +14,6 @@
   <ion-app>
     <ion-tabs>
       <ion-tab label="Plain List" icon="star">
-
         <ion-header>
           <ion-toolbar>
             <ion-title>Tab One</ion-title>
@@ -23,11 +22,9 @@
         <ion-content padding>
           Tab One
         </ion-content>
-
       </ion-tab>
 
       <ion-tab label="Schedule" icon="globe">
-
         <ion-header>
           <ion-toolbar>
             <ion-title>Tab Two</ion-title>
@@ -36,11 +33,9 @@
         <ion-content padding>
           Tab Two
         </ion-content>
-
       </ion-tab>
 
       <ion-tab label="Stopwatch" icon="logo-facebook">
-
         <ion-header>
           <ion-toolbar>
             <ion-title>Tab Three</ion-title>
@@ -49,7 +44,17 @@
         <ion-content padding>
           Tab Three
         </ion-content>
+      </ion-tab>
 
+      <ion-tab id="hiddenTab" label="Hidden" icon="alert" show="false">
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Hidden Tab</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content padding>
+          Hidden Tab
+        </ion-content>
       </ion-tab>
 
       <ion-tab disabled label="Messages" icon="chatboxes" component="page-one">