From 4dc53a2d9dbbbdf73d44a994784414ca9fb76c3f Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 28 Jul 2016 21:57:35 -0500 Subject: [PATCH] refactor(tabs): change the material design tabs to act as bottom navigation 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 --- src/components/tabs/tabs.md.scss | 78 ++++++++++++++++++++------------ src/components/tabs/tabs.ts | 15 ++++-- src/config/modes.ts | 6 +-- 3 files changed, 62 insertions(+), 37 deletions(-) diff --git a/src/components/tabs/tabs.md.scss b/src/components/tabs/tabs.md.scss index 695e7c0cdee..d3ecbed397d 100644 --- 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 index 38985572c41..a12667b085d 100644 --- 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 index 25d82a5baa6..88b824d99ed 100644 --- 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',