diff --git a/demos/tabs/main.html b/demos/tabs/main.html
index 710fea0b3a..6a0f7adaa0 100644
--- a/demos/tabs/main.html
+++ b/demos/tabs/main.html
@@ -28,7 +28,7 @@
-
+
@@ -36,7 +36,7 @@
-
+
@@ -44,7 +44,7 @@
-
+
@@ -52,7 +52,7 @@
-
+
diff --git a/ionic/components/tabs/tabs.ios.scss b/ionic/components/tabs/tabs.ios.scss
index 5360743cb4..4842e4439e 100644
--- a/ionic/components/tabs/tabs.ios.scss
+++ b/ionic/components/tabs/tabs.ios.scss
@@ -59,8 +59,8 @@ ion-tabs[tabbarPlacement=top] tabbar {
}
}
-[tabbarIcons=right] .tab-button,
-[tabbarIcons=left] .tab-button {
+[tabbarLayout=icon-right] .tab-button,
+[tabbarLayout=icon-left] .tab-button {
.tab-button-text {
font-size: 1.4rem;
@@ -76,11 +76,7 @@ ion-tabs[tabbarPlacement=top] tabbar {
}
}
-[tabbarIcons=hide] .tab-button-text {
- font-size: 1.4rem;
- line-height: 1.1;
-}
-
+[tabbarLayout=icon-hide] .tab-button,
.tab-button.has-title-only {
min-height: $tabbar-ios-height - 8;
@@ -90,6 +86,7 @@ ion-tabs[tabbarPlacement=top] tabbar {
}
}
+[tabbarLayout=title-hide] .tab-button,
.tab-button.icon-only {
min-height: $tabbar-ios-height - 8;
}
diff --git a/ionic/components/tabs/tabs.md.scss b/ionic/components/tabs/tabs.md.scss
index 502df86763..ff7430c2ac 100644
--- a/ionic/components/tabs/tabs.md.scss
+++ b/ionic/components/tabs/tabs.md.scss
@@ -49,13 +49,13 @@ tabbar {
min-width: $tabbar-md-item-icon-size + 5;
}
-[tabbarIcons=bottom] .tab-button {
+[tabbarLayout=icon-bottom] .tab-button {
padding-top: 8px;
padding-bottom: 8px;
}
-[tabbarIcons=right] .tab-button,
-[tabbarIcons=left] .tab-button {
+[tabbarLayout=icon-right] .tab-button,
+[tabbarLayout=icon-left] .tab-button {
padding-bottom: 10px;
ion-icon {
@@ -63,6 +63,8 @@ tabbar {
}
}
+[tabbarLayout=icon-hide] .tab-button,
+[tabbarLayout=title-hide] .tab-button,
.tab-button.icon-only,
.tab-button.has-title-only {
padding: 6px 10px 6px 10px;
diff --git a/ionic/components/tabs/tabs.scss b/ionic/components/tabs/tabs.scss
index 535ae3d866..7d5866ceba 100644
--- a/ionic/components/tabs/tabs.scss
+++ b/ionic/components/tabs/tabs.scss
@@ -108,13 +108,13 @@ tab-highlight {
display: none;
}
-[tabbarIcons=bottom] .tab-button {
+[tabbarLayout=icon-bottom] .tab-button {
.tab-button-icon {
order: 10;
}
}
-[tabbarIcons=left] .tab-button {
+[tabbarLayout=icon-left] .tab-button {
flex-direction: row;
.tab-button-icon {
@@ -123,7 +123,7 @@ tab-highlight {
}
}
-[tabbarIcons=right] .tab-button {
+[tabbarLayout=icon-right] .tab-button {
flex-direction: row;
.tab-button-icon {
@@ -133,7 +133,11 @@ tab-highlight {
}
}
-[tabbarIcons=hide] .tab-button-icon {
+[tabbarLayout=icon-hide] .tab-button-icon {
+ display: none;
+}
+
+[tabbarLayout=title-hide] .tab-button-text {
display: none;
}
@@ -155,8 +159,8 @@ tab-highlight {
right: calc(50% - 30px);
}
-[tabbarIcons=bottom] .tab-badge,
-[tabbarIcons=left] .tab-badge,
-[tabbarIcons=right] .tab-badge {
+[tabbarLayout=icon-bottom] .tab-badge,
+[tabbarLayout=icon-left] .tab-badge,
+[tabbarLayout=icon-right] .tab-badge {
right: calc(50% - 50px);
}
diff --git a/ionic/components/tabs/tabs.ts b/ionic/components/tabs/tabs.ts
index f9321583c9..a9996a8afa 100644
--- a/ionic/components/tabs/tabs.ts
+++ b/ionic/components/tabs/tabs.ts
@@ -90,27 +90,32 @@ export class Tabs extends Ion {
subPages: boolean;
/**
- * @input {number} The default selected tab index when first loaded. If a selected index wasn't provided then it'll use `0`, the first tab.
+ * @input {number} The default selected tab index when first loaded. If a selected index isn't provided then it will use `0`, the first tab.
*/
@Input() selectedIndex: any;
/**
- * @input {boolean} Sets whether to preload all the tabs, true or false
+ * @input {boolean} Set whether to preload all the tabs: `true`, `false`.
*/
@Input() preloadTabs: any;
/**
- * @input {string} set the position of the tabbar's icons: top, bottom, left, right, hide
+ * @input {string} Deprecated, use `tabbarLayout` instead. Set the position of the tabbar's icons: `top`, `bottom`, `left`, `right`, `hide`.
*/
@Input() tabbarIcons: string;
/**
- * @input {string} Set position of the tabbar, top or bottom
+ * @input {string} Set the tabbar layout: `icon-top`, `icon-left`, `icon-right`, `icon-bottom`, `icon-hide`, `title-hide`.
+ */
+ @Input() tabbarLayout: string;
+
+ /**
+ * @input {string} Set position of the tabbar: `top`, `bottom`.
*/
@Input() tabbarPlacement: string;
/**
- * @input {any} expression you want to evaluate when the tabs change
+ * @input {any} Expression to evaluate when the tab changes.
*/
@Output() change: EventEmitter = new EventEmitter();
@@ -162,8 +167,13 @@ export class Tabs extends Ion {
*/
ngAfterViewInit() {
this._setConfig('tabbarPlacement', 'bottom');
+ this._setConfig('tabbarLayout', 'icon-top');
this._setConfig('tabbarIcons', 'top');
+ if (this.tabbarIcons) {
+ console.warn("DEPRECATION WARNING: 'tabbarIcons' is no longer supported and will be removed in next major release. Use 'tabbarLayout' instead. Available values: 'icon-top', 'icon-left', 'icon-right', 'icon-bottom', 'icon-hide', 'title-hide'.");
+ }
+
if (this._useHighlight) {
this._platform.onResize(() => {
this._highlight.select(this.getSelected());
@@ -201,7 +211,7 @@ export class Tabs extends Ion {
private _setConfig(attrKey, fallback) {
var val = this[attrKey];
if (isUndefined(val)) {
- val = this._config.get(attrKey);
+ val = this._config.get(attrKey, fallback);
}
this._renderer.setElementAttribute(this._elementRef.nativeElement, attrKey, val);
}
diff --git a/ionic/components/tabs/test/badges/main.html b/ionic/components/tabs/test/badges/main.html
index 736b4c8dc7..521d7607c8 100644
--- a/ionic/components/tabs/test/badges/main.html
+++ b/ionic/components/tabs/test/badges/main.html
@@ -24,7 +24,7 @@
-
+
@@ -32,21 +32,21 @@
-
+
-
+
-
+
diff --git a/ionic/components/tabs/test/tab-bar-scenarios/main.html b/ionic/components/tabs/test/tab-bar-scenarios/main.html
index a221a414d3..e71c0bd045 100644
--- a/ionic/components/tabs/test/tab-bar-scenarios/main.html
+++ b/ionic/components/tabs/test/tab-bar-scenarios/main.html
@@ -24,7 +24,7 @@
-
+
@@ -32,7 +32,7 @@
-
+
@@ -40,7 +40,7 @@
-
+
@@ -48,7 +48,15 @@
-
+
+
+
+
+
+
+
+
+
@@ -61,11 +69,3 @@
-
-
-
-
-
-
-
-
diff --git a/ionic/config/config.ts b/ionic/config/config.ts
index d098fb6c70..0f11e5e377 100644
--- a/ionic/config/config.ts
+++ b/ionic/config/config.ts
@@ -101,6 +101,7 @@ import {isObject, isDefined, isFunction, isArray} from '../util/util';
* | pageTransitionDelay | 16 | 120 |
* | tabbarPlacement | bottom | top |
* | tabbarHighlight | | top |
+ * | tabbarLayout | | |
* | tabSubPages | | true |
*
**/