javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 21:48:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Brandy Carney
2016-07-28 21:57:35 -05:00
parent 087e2f2480
commit 4dc53a2d9d
3 changed files with 62 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/components/tabs/tabs.md.scss
View File

@ -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
// --------------------------------------------------
width: 1px;
height: 2px;
[tabsHighlight=true] {
background: $tab-button-md-active-color;
transform: translateZ(0);
transform-origin: 0 0;
tab-highlight {
position: absolute;
bottom: 0;
left: 0;
display: block;
&.animate {
transition-duration: 300ms;
width: 1px;
height: 2px;
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) {

15
src/components/tabs/tabs.ts
View File

@ -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);
}
}

6
src/config/modes.ts
View File

@ -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',