refactor(tabs): change the material design tabs to act as bottom navi…

…gation Update tabs to reflect the material design bottom navigation spec: https://material.google.com/components/bottom-navigation.html#bottom-nav igation-usage BREAKING CHANGES: Material design mode defaults have changed to the following: ``` tabsHighlight: false, tabsPlacement: 'bottom', tabsHideOnSubPages: false ``` `tabsHighlight` can now be passed as an attribute on the `ion-tabs` element, this allows for tabs to be added in multiple places inside of an app and enable the highlight on some of them. references #7455
ionic-team · Jul 29, 2016 · 4dc53a2 · 4dc53a2
1 parent 087e2f2
commit 4dc53a2
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 37 deletions.
diff --git a/src/components/tabs/tabs.md.scss b/src/components/tabs/tabs.md.scss
@@ -5,44 +5,45 @@
 // --------------------------------------------------
 
 $tabbar-md-background:               $toolbar-md-background !default;
-$tabbar-md-item-padding:             12px 10px 5px 10px !default;
+$tabbar-md-item-padding:             8px 0 10px 0 !default;
 $tabbar-md-item-font-size:           1.4rem !default;
-$tabbar-md-item-font-weight:         500 !default;
+$tabbar-md-item-font-weight:         normal !default;
 $tabbar-md-item-icon-size:           2.4rem !default;
-$tabbar-md-item-height:              4.8rem !default;
+$tabbar-md-item-height:              5.6rem !default;
 
 $tab-button-md-active-color:         $toolbar-md-active-color !default;
+$tab-button-md-active-font-size:     1.5rem !default;
+$tab-button-md-active-padding-top:   6px !default;
 $tab-button-md-inactive-opacity:     .7 !default;
 $tab-button-md-inactive-color:       rgba($toolbar-md-inactive-color, $tab-button-md-inactive-opacity) !default;
+$tab-button-md-text-transform:       none !default;
+$tab-button-md-text-margin:          6px 0 !default;
 
 
 ion-tabbar {
   background: $tabbar-md-background;
 }
 
-
 .tab-button {
   padding: $tabbar-md-item-padding;
 
   min-height: $tabbar-md-item-height;
 
-  border-bottom: 2px solid transparent;
-  border-radius: 0;
   font-size: $tabbar-md-item-font-size;
   font-weight: $tabbar-md-item-font-weight;
   color: $tab-button-md-inactive-color;
-  box-shadow: none;
 
   &[aria-selected=true] {
     color: $tab-button-md-active-color;
+    font-size: $tab-button-md-active-font-size;
+    padding-top: $tab-button-md-active-padding-top;
   }
 }
 
 .tab-button-text {
-  margin-top: 5px;
-  margin-bottom: 5px;
+  margin: $tab-button-md-text-margin;
 
-  text-transform: uppercase;
+  text-transform: $tab-button-md-text-transform;
 }
 
 .tab-button-icon {
@@ -51,9 +52,21 @@ ion-tabbar {
   font-size: $tabbar-md-item-icon-size;
 }
 
-[tabsLayout=icon-bottom] .tab-button {
-  padding-top: 8px;
-  padding-bottom: 8px;
+[tabsLayout=icon-top] {
+  .has-icon .tab-button-text {
+    margin-bottom: 0;
+  }
+}
+
+[tabsLayout=icon-bottom] {
+  .tab-button {
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+
+  .tab-button-text {
+    margin-top: 0;
+  }
 }
 
 [tabsLayout=icon-right] .tab-button,
@@ -72,30 +85,37 @@ ion-tabbar {
   padding: 6px 10px;
 }
 
-tab-highlight {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  display: block;
+// Material Design Tab Highlight
+// --------------------------------------------------
+
+[tabsHighlight=true] {
 
-  width: 1px;
-  height: 2px;
+  tab-highlight {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    display: block;
 
-  background: $tab-button-md-active-color;
-  transform: translateZ(0);
-  transform-origin: 0 0;
+    width: 1px;
+    height: 2px;
 
-  &.animate {
-    transition-duration: 300ms;
+    background: $tab-button-md-active-color;
+    transform: translateZ(0);
+    transform-origin: 0 0;
+
+    &.animate {
+      transition-duration: 300ms;
+    }
+  }
+
+  &[tabsPlacement=bottom] tab-highlight {
+    top: 0;
   }
-}
 
-[tabsPlacement=bottom] tab-highlight {
-  top: 0;
 }
 
 
-// Material Design  Tabbar Color Mixin
+// Material Design Tabs Color Mixin
 // --------------------------------------------------
 
 @mixin tabbar-md($color-name, $color-base, $color-contrast) {

diff --git a/src/components/tabs/tabs.ts b/src/components/tabs/tabs.ts
@@ -160,7 +160,6 @@ export class Tabs extends Ion {
   private _tabs: Tab[] = [];
   private _onReady: any = null;
   private _sbPadding: boolean;
-  private _useHighlight: boolean;
   private _top: number;
   private _bottom: number;
 
@@ -209,6 +208,11 @@ export class Tabs extends Ion {
    */
   @Input() tabsPlacement: string;
 
+  /**
+   * @input {boolean} Whether to show the tab highlight bar under the selected tab. Default: `false`.
+   */
+  @Input() tabsHighlight: boolean;
+
   /**
    * @input {any} Expression to evaluate when the tab changes.
    */
@@ -249,7 +253,7 @@ export class Tabs extends Ion {
     this.id = 't' + (++tabIds);
     this._sbPadding = _config.getBoolean('statusbarPadding');
     this.subPages = _config.getBoolean('tabsHideOnSubPages');
-    this._useHighlight = _config.getBoolean('tabsHighlight');
+    this.tabsHighlight = _config.getBoolean('tabsHighlight');
 
     // TODO deprecated 07-07-2016 beta.11
     if (_config.get('tabSubPages') !== null) {
@@ -260,7 +264,7 @@ export class Tabs extends Ion {
     // TODO deprecated 07-07-2016 beta.11
     if (_config.get('tabbarHighlight') !== null) {
       console.warn('Config option "tabbarHighlight" has been deprecated. Please use "tabsHighlight" instead.');
-      this._useHighlight = _config.getBoolean('tabbarHighlight');
+      this.tabsHighlight = _config.getBoolean('tabbarHighlight');
     }
 
     if (this.parent) {
@@ -291,6 +295,7 @@ export class Tabs extends Ion {
   ngAfterViewInit() {
     this._setConfig('tabsPlacement', 'bottom');
     this._setConfig('tabsLayout', 'icon-top');
+    this._setConfig('tabsHighlight', this.tabsHighlight);
 
     // TODO deprecated 07-07-2016 beta.11
     this._setConfig('tabbarPlacement', 'bottom');
@@ -322,7 +327,7 @@ export class Tabs extends Ion {
       this._renderer.setElementAttribute(this._elementRef.nativeElement, 'tabsLayout', this._config.get('tabsLayout'));
     }
 
-    if (this._useHighlight) {
+    if (this.tabsHighlight) {
       this._platform.onResize(() => {
         this._highlight.select(this.getSelected());
       });
@@ -428,7 +433,7 @@ export class Tabs extends Ion {
           tab.setSelected(tab === selectedTab);
         });
 
-        if (this._useHighlight) {
+        if (this.tabsHighlight) {
           this._highlight.select(selectedTab);
         }
       }

diff --git a/src/config/modes.ts b/src/config/modes.ts
@@ -81,9 +81,9 @@ Config.setModeConfig('md', {
 
   spinner: 'crescent',
 
-  tabsHighlight: true,
-  tabsPlacement: 'top',
-  tabsHideOnSubPages: true,
+  tabsHighlight: false,
+  tabsPlacement: 'bottom',
+  tabsHideOnSubPages: false,
 
   toastEnter: 'toast-md-slide-in',
   toastLeave: 'toast-md-slide-out',