refactor(tabs): rename tab input/config options to be more clear/consistent

BREAKING CHANGES:

Tab input/config options have been renamed. The following options were
renamed:

- `tabbarHighlight` -> `tabsHighlight`
- `tabbarLayout` -> `tabsLayout`
- `tabSubPages` -> `tabsHideOnSubPages`
- `tabbarPlacement` -> `tabsPlacement`

The previous names have been deprecated. They will still work in the
current release but will be removed in the future so please update to
the new names.

references #7143

demos/config/index.ts

@@ -94,13 +94,13 @@ export class ApiDemoPage {
       this.config = {
         'backButtonIcon': 'ios-arrow-back',
         'iconMode': 'ios',
-        'tabbarPlacement': 'bottom'
+        'tabsPlacement': 'bottom'
       };
     } else {
       this.config = {
         'backButtonIcon': 'md-arrow-back',
         'iconMode': 'md',
-        'tabbarPlacement': 'top'
+        'tabsPlacement': 'top'
       };
     }
 

demos/config/main.html

@@ -31,7 +31,7 @@
 
     <ion-item>
       <ion-label>Tab Placement</ion-label>
-      <ion-select [(ngModel)]="config.tabbarPlacement">
+      <ion-select [(ngModel)]="config.tabsPlacement">
         <ion-option value="bottom">bottom</ion-option>
         <ion-option value="top">top</ion-option>
       </ion-select>
@@ -53,7 +53,7 @@
 ionicBootstrap(MyApp, [], {
   backButtonIcon: "{{initialConfig.backButtonIcon}}"
   iconMode: "{{initialConfig.iconMode}}"
-  tabbarPlacement: "{{initialConfig.tabbarPlacement}}"
+  tabsPlacement: "{{initialConfig.tabsPlacement}}"
 });</pre>
 
   <div padding>

demos/tabs/main.html

@@ -33,7 +33,7 @@
 
 
   <!-- Icons below text -->
-  <ion-tabs tabbarLayout="icon-bottom" selectedIndex="1" danger>
+  <ion-tabs tabsLayout="icon-bottom" selectedIndex="1" danger>
     <ion-tab tabTitle="Recents" tabIcon="call" [root]="root" tabBadge="47" tabBadgeStyle="light"></ion-tab>
     <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
     <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
@@ -41,7 +41,7 @@
 
 
   <!-- Icons right of text -->
-  <ion-tabs tabbarLayout="icon-right" selectedIndex="0" light>
+  <ion-tabs tabsLayout="icon-right" selectedIndex="0" light>
     <ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
     <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
     <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root" tabBadge="4" tabBadgeStyle="secondary"></ion-tab>
@@ -49,7 +49,7 @@
 
 
   <!-- Icons left of text -->
-  <ion-tabs tabbarLayout="icon-left" dark>
+  <ion-tabs tabsLayout="icon-left" dark>
     <ion-tab tabTitle="Recents" tabIcon="call" [root]="root" tabBadge="1" tabBadgeStyle="danger"></ion-tab>
     <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
     <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
@@ -57,7 +57,7 @@
 
 
   <!-- No icons -->
-  <ion-tabs tabbarLayout="icon-hide">
+  <ion-tabs tabsLayout="icon-hide">
     <ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
     <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root" tabBadge="61" tabBadgeStyle="dark"></ion-tab>
     <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>

src/components/app/structure.scss

@@ -176,7 +176,7 @@ ion-tabbar.show-tabbar {
   opacity: 1;
 }
 
-[tabbarPlacement=top] > ion-tabbar {
+[tabsPlacement=top] > ion-tabbar {
   top: 0;
   bottom: auto;
 }

src/components/content/content.ts

@@ -68,7 +68,7 @@ export class Content extends Ion {
   private _headerHeight: number;
   private _footerHeight: number;
   private _tabbarHeight: number;
-  private _tabbarPlacement: string;
+  private _tabsPlacement: string;
   private _inputPolling: boolean = false;
   private _scroll: ScrollView;
   private _scLsn: Function;
@@ -492,7 +492,7 @@ export class Content extends Ion {
     this._paddingLeft = 0;
     this._headerHeight = 0;
     this._footerHeight = 0;
-    this._tabbarPlacement = null;
+    this._tabsPlacement = null;
 
     let ele: HTMLElement = this._elementRef.nativeElement;
     if (!ele) return;
@@ -530,9 +530,9 @@ export class Content extends Ion {
         tabbarEle = <HTMLElement>ele.firstElementChild;
         this._tabbarHeight = tabbarEle.clientHeight;
 
-        if (this._tabbarPlacement === null) {
+        if (this._tabsPlacement === null) {
           // this is the first tabbar found, remember it's position
-          this._tabbarPlacement = ele.getAttribute('tabbarplacement');
+          this._tabsPlacement = ele.getAttribute('tabsplacement');
         }
       }
 
@@ -558,7 +558,7 @@ export class Content extends Ion {
       // have come from the app's css, is different than the new padding value
 
       newVal = this._headerHeight + this._paddingTop;
-      if (this._tabbarPlacement === 'top') {
+      if (this._tabsPlacement === 'top') {
         newVal += this._tabbarHeight;
       }
       if (newVal !== this.contentTop) {
@@ -567,7 +567,7 @@ export class Content extends Ion {
       }
 
       newVal = this._footerHeight + this._paddingBottom;
-      if (this._tabbarPlacement === 'bottom') {
+      if (this._tabsPlacement === 'bottom') {
         newVal += this._tabbarHeight;
 
         if (newVal > 0 && this._footerEle) {
@@ -582,7 +582,7 @@ export class Content extends Ion {
     } else {
       // adjust the content with margins
       newVal = this._headerHeight;
-      if (this._tabbarPlacement === 'top') {
+      if (this._tabsPlacement === 'top') {
         newVal += this._tabbarHeight;
       }
       if (newVal !== this.contentTop) {
@@ -591,7 +591,7 @@ export class Content extends Ion {
       }
 
       newVal = this._footerHeight;
-      if (this._tabbarPlacement === 'bottom') {
+      if (this._tabsPlacement === 'bottom') {
         newVal += this._tabbarHeight;
       }
       if (newVal !== this.contentBottom) {
@@ -605,9 +605,9 @@ export class Content extends Ion {
     }
 
 
-    if (this._tabbarPlacement !== null && this._tabs) {
+    if (this._tabsPlacement !== null && this._tabs) {
       // set the position of the tabbar
-      if (this._tabbarPlacement === 'top') {
+      if (this._tabsPlacement === 'top') {
         this._tabs.setTabbarPosition(this._headerHeight, -1);
 
       } else {

src/components/tabs/tab-button.ts

@@ -37,12 +37,17 @@ export class TabButton extends Ion {
   constructor(config: Config, elementRef: ElementRef) {
     super(elementRef);
     this.disHover = (config.get('hoverCSS') === false);
+    this.layout = config.get('tabsLayout');
+
+    // TODO deprecated 07-07-2016 beta.11
+    if (config.get('tabbarLayout') !== undefined) {
       this.layout = config.get('tabbarLayout');
     }
+  }
 
   ngOnInit() {
     this.tab.btn = this;
-    this.layout = this.tab.parent.tabbarLayout || this.layout;
+    this.layout = this.tab.parent.tabsLayout || this.layout;
 
     this.hasTitle = !!this.tab.tabTitle;
     this.hasIcon = !!this.tab.tabIcon && this.layout !== 'icon-hide';

src/components/tabs/tabs.ios.scss

@@ -22,7 +22,7 @@ ion-tabbar {
   background: $tabbar-ios-background;
 }
 
-ion-tabs[tabbarPlacement=top] ion-tabbar {
+ion-tabs[tabsPlacement=top] ion-tabbar {
   border-top: 0;
   border-bottom: 1px solid $toolbar-ios-border-color;
 }
@@ -65,8 +65,8 @@ ion-tabs[tabbarPlacement=top] ion-tabbar {
   }
 }
 
-[tabbarLayout=icon-right] .tab-button,
+[tabsLayout=icon-right] .tab-button,
-[tabbarLayout=icon-left] .tab-button {
+[tabsLayout=icon-left] .tab-button {
 
   .tab-button-text {
     font-size: 1.4rem;
@@ -81,7 +81,7 @@ ion-tabs[tabbarPlacement=top] ion-tabbar {
   }
 }
 
-[tabbarLayout=icon-hide] .tab-button,
+[tabsLayout=icon-hide] .tab-button,
 .tab-button.has-title-only {
   min-height: $tabbar-ios-height - 8;
 
@@ -93,7 +93,7 @@ ion-tabs[tabbarPlacement=top] ion-tabbar {
   }
 }
 
-[tabbarLayout=title-hide] .tab-button,
+[tabsLayout=title-hide] .tab-button,
 .tab-button.icon-only {
   min-height: $tabbar-ios-height - 8;
 }
@@ -104,7 +104,7 @@ ion-tabs[tabbarPlacement=top] ion-tabbar {
     border-top-width: $hairlines-width;
   }
 
-  &[tabbarPlacement="top"] ion-tabbar {
+  &[tabsPlacement="top"] ion-tabbar {
     border-bottom-width: $hairlines-width;
   }
 

src/components/tabs/tabs.md.scss

@@ -52,13 +52,13 @@ ion-tabbar {
   font-size: $tabbar-md-item-icon-size;
 }
 
-[tabbarLayout=icon-bottom] .tab-button {
+[tabsLayout=icon-bottom] .tab-button {
   padding-top: 8px;
   padding-bottom: 8px;
 }
 
-[tabbarLayout=icon-right] .tab-button,
+[tabsLayout=icon-right] .tab-button,
-[tabbarLayout=icon-left] .tab-button {
+[tabsLayout=icon-left] .tab-button {
   padding-bottom: 10px;
 
   ion-icon {
@@ -66,8 +66,8 @@ ion-tabbar {
   }
 }
 
-[tabbarLayout=icon-hide] .tab-button,
+[tabsLayout=icon-hide] .tab-button,
-[tabbarLayout=title-hide] .tab-button,
+[tabsLayout=title-hide] .tab-button,
 .tab-button.icon-only,
 .tab-button.has-title-only {
   padding: 6px 10px;
@@ -91,7 +91,7 @@ tab-highlight {
   }
 }
 
-[tabbarPlacement=bottom] tab-highlight {
+[tabsPlacement=bottom] tab-highlight {
   top: 0;
 }
 

src/components/tabs/tabs.scss

@@ -75,13 +75,13 @@ tab-highlight {
   display: none;
 }
 
-[tabbarLayout=icon-bottom] .tab-button {
+[tabsLayout=icon-bottom] .tab-button {
   .tab-button-icon {
     order: 10;
   }
 }
 
-[tabbarLayout=icon-left] .tab-button {
+[tabsLayout=icon-left] .tab-button {
   flex-direction: row;
 
   .tab-button-icon {
@@ -91,7 +91,7 @@ tab-highlight {
   }
 }
 
-[tabbarLayout=icon-right] .tab-button {
+[tabsLayout=icon-right] .tab-button {
   flex-direction: row;
 
   .tab-button-icon {
@@ -103,11 +103,11 @@ tab-highlight {
   }
 }
 
-[tabbarLayout=icon-hide] .tab-button-icon {
+[tabsLayout=icon-hide] .tab-button-icon {
   display: none;
 }
 
-[tabbarLayout=title-hide] .tab-button-text {
+[tabsLayout=title-hide] .tab-button-text {
   display: none;
 }
 
@@ -132,8 +132,8 @@ tab-highlight {
   right: calc(50% - 30px);
 }
 
-[tabbarLayout=icon-bottom] .tab-badge,
+[tabsLayout=icon-bottom] .tab-badge,
-[tabbarLayout=icon-left] .tab-badge,
+[tabsLayout=icon-left] .tab-badge,
-[tabbarLayout=icon-right] .tab-badge {
+[tabsLayout=icon-right] .tab-badge {
   right: calc(50% - 50px);
 }

src/components/tabs/tabs.ts

@@ -29,21 +29,21 @@ import { ViewController } from '../nav/view-controller';
  * The position of the tabs relative to the content varies based on
  * the mode. By default, the tabs are placed at the bottom of the screen
  * for `ios` mode, and at the top for the `md` and `wp` modes. You can
- * configure the position using the `tabbarPlacement` property on the
+ * configure the position using the `tabsPlacement` property on the
  * `<ion-tabs>` element, or in your app's [config](../../config/Config/).
  * See the [Input Properties](#input-properties) below for the available
- * values of `tabbarPlacement`.
+ * values of `tabsPlacement`.
  *
  * ### Layout
  *
- * The layout for all of the tabs can be defined using the `tabbarLayout`
+ * The layout for all of the tabs can be defined using the `tabsLayout`
  * property. If the individual tab has a title and icon, the icons will
  * show on top of the title by default. All tabs can be changed by setting
- * the value of `tabbarLayout` on the `<ion-tabs>` element, or in your
+ * the value of `tabsLayout` on the `<ion-tabs>` element, or in your
  * app's [config](../../config/Config/). For example, this is useful if
  * you want to show tabs with a title only on Android, but show icons
  * and a title for iOS. See the [Input Properties](#input-properties)
- * below for the available values of `tabbarLayout`.
+ * below for the available values of `tabsLayout`.
  *
  * ### Selecting a Tab
  *
@@ -187,15 +187,25 @@ export class Tabs extends Ion {
    */
   @Input() preloadTabs: any;
 
+  /**
+   * @private DEPRECATED. Please use `tabsLayout` instead.
+   */
+  @Input() private tabbarLayout: string;
+
   /**
    * @input {string} Set the tabbar layout: `icon-top`, `icon-left`, `icon-right`, `icon-bottom`, `icon-hide`, `title-hide`.
    */
-  @Input() tabbarLayout: string;
+  @Input() tabsLayout: string;
+
+  /**
+   * @private DEPRECATED. Please use `tabsPlacement` instead.
+   */
+  @Input() private tabbarPlacement: string;
 
   /**
    * @input {string} Set position of the tabbar: `top`, `bottom`.
    */
-  @Input() tabbarPlacement: string;
+  @Input() tabsPlacement: string;
 
   /**
    * @input {any} Expression to evaluate when the tab changes.
@@ -235,9 +245,21 @@ export class Tabs extends Ion {
 
     this.parent = parent;
     this.id = ++tabIds;
-    this.subPages = _config.getBoolean('tabSubPages');
-    this._useHighlight = _config.getBoolean('tabbarHighlight');
     this._sbPadding = _config.getBoolean('statusbarPadding');
+    this.subPages = _config.getBoolean('tabsHideOnSubPages');
+    this._useHighlight = _config.getBoolean('tabsHighlight');
+
+    // TODO deprecated 07-07-2016 beta.11
+    if (_config.get('tabSubPages') !== null) {
+      console.warn("Config option 'tabSubPages' has been deprecated. Please use 'tabsHideOnSubPages' instead.");
+      this.subPages = _config.getBoolean('tabSubPages');
+    }
+
+    // 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');
+    }
 
     if (parent) {
       // this Tabs has a parent Nav
@@ -265,9 +287,39 @@ export class Tabs extends Ion {
    * @private
    */
   ngAfterViewInit() {
+    this._setConfig('tabsPlacement', 'bottom');
+    this._setConfig('tabsLayout', 'icon-top');
+
+    // TODO deprecated 07-07-2016 beta.11
     this._setConfig('tabbarPlacement', 'bottom');
     this._setConfig('tabbarLayout', 'icon-top');
 
+    // TODO deprecated 07-07-2016 beta.11
+    if (this.tabbarPlacement !== undefined) {
+      console.warn("Input 'tabbarPlacement' has been deprecated. Please use 'tabsPlacement' instead.");
+      this._renderer.setElementAttribute(this._elementRef.nativeElement, 'tabsPlacement', this.tabbarPlacement);
+      this.tabsPlacement = this.tabbarPlacement;
+    }
+
+    // TODO deprecated 07-07-2016 beta.11
+    if (this._config.get('tabbarPlacement') !== null) {
+      console.warn("Config option 'tabbarPlacement' has been deprecated. Please use 'tabsPlacement' instead.");
+      this._renderer.setElementAttribute(this._elementRef.nativeElement, 'tabsPlacement', this._config.get('tabbarPlacement'));
+    }
+
+    // TODO deprecated 07-07-2016 beta.11
+    if (this.tabbarLayout !== undefined) {
+      console.warn("Input 'tabbarLayout' has been deprecated. Please use 'tabsLayout' instead.");
+      this._renderer.setElementAttribute(this._elementRef.nativeElement, 'tabsLayout', this.tabbarLayout);
+      this.tabsLayout = this.tabbarLayout;
+    }
+
+    // TODO deprecated 07-07-2016 beta.11
+    if (this._config.get('tabbarLayout') !== null) {
+      console.warn("Config option 'tabbarLayout' has been deprecated. Please use 'tabsLayout' instead.");
+      this._renderer.setElementAttribute(this._elementRef.nativeElement, 'tabsLayout', this._config.get('tabsLayout'));
+    }
+
     if (this._useHighlight) {
       this._platform.onResize(() => {
         this._highlight.select(this.getSelected());

src/components/tabs/tabs.wp.scss

@@ -56,13 +56,13 @@ ion-tabbar {
   font-size: $tabbar-wp-item-icon-size;
 }
 
-[tabbarLayout=icon-bottom] .tab-button {
+[tabsLayout=icon-bottom] .tab-button {
   padding-top: 8px;
   padding-bottom: 8px;
 }
 
-[tabbarLayout=icon-right] .tab-button,
+[tabsLayout=icon-right] .tab-button,
-[tabbarLayout=icon-left] .tab-button {
+[tabsLayout=icon-left] .tab-button {
   padding-bottom: 10px;
 
   ion-icon {
@@ -70,14 +70,14 @@ ion-tabbar {
   }
 }
 
-[tabbarLayout=icon-hide] .tab-button,
+[tabsLayout=icon-hide] .tab-button,
-[tabbarLayout=title-hide] .tab-button,
+[tabsLayout=title-hide] .tab-button,
 .tab-button.icon-only,
 .tab-button.has-title-only {
   padding: 6px 10px;
 }
 
-[tabbarPlacement=bottom] .tab-button {
+[tabsPlacement=bottom] .tab-button {
   border-top: 2px solid transparent;
   border-bottom-width: 0;
 

src/components/tabs/test/badges/main.html

@@ -24,7 +24,7 @@
 
 
 <!-- Icons below text -->
-<ion-tabs tabbarLayout="icon-bottom" no-navbar>
+<ion-tabs tabsLayout="icon-bottom" no-navbar>
   <ion-tab tabTitle="Recents" tabIcon="call"></ion-tab>
   <ion-tab tabTitle="Favorites" tabIcon="heart" tabBadge="577" tabBadgeStyle="dark"></ion-tab>
   <ion-tab tabTitle="Settings" tabIcon="settings"></ion-tab>
@@ -32,21 +32,21 @@
 
 
 <!-- Icons right of text -->
-<ion-tabs tabbarLayout="icon-right" primary no-navbar>
+<ion-tabs tabsLayout="icon-right" primary no-navbar>
   <ion-tab tabTitle="Recents" tabIcon="call"></ion-tab>
   <ion-tab tabTitle="Favorites" tabIcon="heart"></ion-tab>
   <ion-tab tabTitle="Settings" tabIcon="settings" tabBadge="1030" tabBadgeStyle="light"></ion-tab>
 </ion-tabs>
 
 <!-- Icons left of text -->
-<ion-tabs tabbarLayout="icon-left" no-navbar>
+<ion-tabs tabsLayout="icon-left" no-navbar>
   <ion-tab tabTitle="Recents" tabIcon="call" tabBadge="32" tabBadgeStyle="danger"></ion-tab>
   <ion-tab tabTitle="Favorites" tabIcon="heart"></ion-tab>
   <ion-tab tabTitle="Settings" tabIcon="settings"></ion-tab>
 </ion-tabs>
 
 <!-- No icons -->
-<ion-tabs no-navbar tabbarLayout="icon-hide">
+<ion-tabs no-navbar tabsLayout="icon-hide">
   <ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
   <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root" tabBadge="4"></ion-tab>
   <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
@@ -54,14 +54,14 @@
 
 
 <!-- No title -->
-<ion-tabs tabbarLayout="title-hide" secondary no-navbar>
+<ion-tabs tabsLayout="title-hide" secondary no-navbar>
   <ion-tab tabTitle="Recents" tabIcon="call" [root]="root" tabBadge="7" tabBadgeStyle="light"></ion-tab>
   <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
   <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
 </ion-tabs>
 
 <!-- Dynamic Badge -->
-<ion-tabs tabbarLayout="icon-left" no-navbar>
+<ion-tabs tabsLayout="icon-left" no-navbar>
   <ion-tab tabTitle="Recents" tabIcon="call"></ion-tab>
   <ion-tab tabTitle="Favorites" tabIcon="heart"></ion-tab>
   <ion-tab tabTitle="Settings" tabIcon="settings" [tabBadge]="myBadge" tabBadgeStyle="primary"></ion-tab>

src/components/tabs/test/colors/main.html

@@ -24,7 +24,7 @@
 
 
 <!-- Icons below text -->
-<ion-tabs tabbarLayout="icon-bottom" no-navbar selectedIndex="1" dark>
+<ion-tabs tabsLayout="icon-bottom" no-navbar selectedIndex="1" dark>
   <ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
   <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
   <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
@@ -32,7 +32,7 @@
 
 
 <!-- Icons right of text -->
-<ion-tabs tabbarLayout="icon-right" no-navbar selectedIndex="0" danger>
+<ion-tabs tabsLayout="icon-right" no-navbar selectedIndex="0" danger>
   <ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
   <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
   <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
@@ -40,7 +40,7 @@
 
 
 <!-- Icons left of text -->
-<ion-tabs tabbarLayout="icon-left" no-navbar light>
+<ion-tabs tabsLayout="icon-left" no-navbar light>
   <ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
   <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
   <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
@@ -48,7 +48,7 @@
 
 
 <!-- No icons -->
-<ion-tabs tabbarLayout="icon-hide" no-navbar primary>
+<ion-tabs tabsLayout="icon-hide" no-navbar primary>
   <ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
   <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
   <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
@@ -56,7 +56,7 @@
 
 
 <!-- No title -->
-<ion-tabs tabbarLayout="title-hide" no-navbar secondary>
+<ion-tabs tabsLayout="title-hide" no-navbar secondary>
   <ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
   <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
   <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>

src/components/tabs/test/tab-bar-scenarios/main.html

@@ -24,7 +24,7 @@
 
 
 <!-- Icons below text -->
-<ion-tabs tabbarLayout="icon-bottom" no-navbar selectedIndex="1">
+<ion-tabs tabsLayout="icon-bottom" no-navbar selectedIndex="1">
   <ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
   <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
   <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
@@ -32,7 +32,7 @@
 
 
 <!-- Icons right of text -->
-<ion-tabs tabbarLayout="icon-right" no-navbar selectedIndex="0">
+<ion-tabs tabsLayout="icon-right" no-navbar selectedIndex="0">
   <ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
   <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
   <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
@@ -40,7 +40,7 @@
 
 
 <!-- Icons left of text -->
-<ion-tabs tabbarLayout="icon-left" no-navbar>
+<ion-tabs tabsLayout="icon-left" no-navbar>
   <ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
   <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
   <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
@@ -48,7 +48,7 @@
 
 
 <!-- No icons -->
-<ion-tabs tabbarLayout="icon-hide" no-navbar>
+<ion-tabs tabsLayout="icon-hide" no-navbar>
   <ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
   <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
   <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
@@ -56,7 +56,7 @@
 
 
 <!-- No title -->
-<ion-tabs tabbarLayout="title-hide" secondary no-navbar>
+<ion-tabs tabsLayout="title-hide" secondary no-navbar>
   <ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
   <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
   <ion-tab tabTitle="Radio" tabIcon="musical-notes" [root]="root"></ion-tab>

src/components/toolbar/toolbar.md.scss

@@ -30,9 +30,9 @@ $navbar-md-height:                       $toolbar-md-height !default;
 
 
 ion-header::after,
-[tabbarplacement="top"] > ion-tabbar::after,
+[tabsPlacement="top"] > ion-tabbar::after,
 ion-footer::before,
-[tabbarplacement="bottom"] > ion-tabbar::before {
+[tabsPlacement="bottom"] > ion-tabbar::before {
   // using datauri png background image for improved scroll performance
   // rather than using `box-shadow: 0 2px 5px rgba(0,0,0,0.26);`
   // noticable performance difference on older Android devices
@@ -51,7 +51,7 @@ ion-footer::before,
 }
 
 ion-footer::before,
-[tabbarplacement="bottom"] > ion-tabbar::before {
+[tabsPlacement="bottom"] > ion-tabbar::before {
   top: -2px;
   bottom: auto;
 

src/config/bootstrap.ts

@@ -27,7 +27,7 @@ const _reflect: any = Reflect;
  * })
  * export class MyClass{}
  *
- * ionicBootstrap(MyClass, null, {tabbarPlacement: 'bottom'})
+ * ionicBootstrap(MyClass, null, {tabsPlacement: 'bottom'})
  * ```
  */
 export function ionicBootstrap(appRootComponent: any, customProviders?: Array<any>, config?: any) {

src/config/config.ts

@@ -24,7 +24,7 @@ import {isObject, isDefined, isFunction, isArray} from '../util/util';
  *   iconMode: 'ios',
  *   modalEnter: 'modal-slide-in',
  *   modalLeave: 'modal-slide-out',
- *   tabbarPlacement: 'bottom',
+ *   tabsPlacement: 'bottom',
  *   pageTransition: 'ios',
  * });
  * ```
@@ -37,19 +37,19 @@ import {isObject, isDefined, isFunction, isArray} from '../util/util';
  * import {ionicBootstrap} from 'ionic-angular';
  *
  * ionicBootstrap(AppRoot, customProviders, {
- *   tabbarPlacement: 'bottom',
+ *   tabsPlacement: 'bottom',
  *   platforms: {
  *   ios: {
- *     tabbarPlacement: 'top',
+ *     tabsPlacement: 'top',
  *   }
  * });
  * ```
  *
- * We could also configure these values at a component level. Take `tabbarPlacement`,
+ * We could also configure these values at a component level. Take `tabsPlacement`,
  * we can configure this as a property on our `ion-tabs`.
  *
  * ```html
- * <ion-tabs tabbarPlacement="top">
+ * <ion-tabs tabsPlacement="top">
  *   <ion-tab tabTitle="Dash" tabIcon="pulse" [root]="tabRoot"></ion-tab>
  * </ion-tabs>
  * ```
@@ -58,7 +58,7 @@ import {isObject, isDefined, isFunction, isArray} from '../util/util';
  * while in the browser. Simply add `?ionic<PROPERTYNAME>=<value>` to the url.
  *
  * ```bash
- * http://localhost:8100/?ionicTabbarPlacement=bottom
+ * http://localhost:8100/?ionicTabsPlacement=bottom
  * ```
  *
  * Any value can be added to config, and looked up at a later in any component.
@@ -100,10 +100,10 @@ import {isObject, isDefined, isFunction, isArray} from '../util/util';
  * | `popoverLeave`           | `string`            | The name of the transition to use while a popover is dismissed.                                                                                  |
  * | `prodMode`               | `boolean`           | Disable development mode, which turns off assertions and other checks within the framework. One important assertion this disables verifies that a change detection pass does not result in additional changes to any bindings (also known as unidirectional data flow).
  * | `spinner`                | `string`            | The default spinner to use when a name is not defined.                                                                                           |
- * | `tabbarHighlight`        | `boolean`           | Whether to show a highlight line under the tab when it is selected.                                                                              |
+ * | `tabsHighlight`          | `boolean`           | Whether to show a highlight line under the tab when it is selected.                                                                              |
- * | `tabbarLayout`           | `string`            | The layout to use for all tabs. Available options: `"icon-top"`, `"icon-left"`, `"icon-right"`, `"icon-bottom"`, `"icon-hide"`, `"title-hide"`.  |
+ * | `tabsLayout`             | `string`            | The layout to use for all tabs. Available options: `"icon-top"`, `"icon-left"`, `"icon-right"`, `"icon-bottom"`, `"icon-hide"`, `"title-hide"`.  |
- * | `tabbarPlacement`        | `string`            | The position of the tabs. Available options: `"top"`, `"bottom"`                                                                                 |
+ * | `tabsPlacement`          | `string`            | The position of the tabs relative to the content. Available options: `"top"`, `"bottom"`                                                         |
- * | `tabSubPages`            | `boolean`           | Whether to hide the tabs on child pages or not. If `true` it will not show the tabs on child pages.                                              |
+ * | `tabsHideOnSubPages`     | `boolean`           | Whether to hide the tabs on child pages or not. If `true` it will not show the tabs on child pages.                                              |
  * | `toastEnter`             | `string`            | The name of the transition to use while a toast is presented.                                                                                    |
  * | `toastLeave`             | `string`            | The name of the transition to use while a toast is dismissed.                                                                                    |
  *

src/config/modes.ts

@@ -37,10 +37,9 @@ Config.setModeConfig('ios', {
 
   spinner: 'ios',
 
-  tabbarHighlight: false,
+  tabsHighlight: false,
-  tabbarPlacement: 'bottom',
+  tabsPlacement: 'bottom',
-
+  tabsHideOnSubPages: false,
-  tabSubPages: false,
 
   toastEnter: 'toast-slide-in',
   toastLeave: 'toast-slide-out',
@@ -82,10 +81,9 @@ Config.setModeConfig('md', {
 
   spinner: 'crescent',
 
-  tabbarHighlight: true,
+  tabsHighlight: true,
-  tabbarPlacement: 'top',
+  tabsPlacement: 'top',
-
+  tabsHideOnSubPages: true,
-  tabSubPages: true,
 
   toastEnter: 'toast-md-slide-in',
   toastLeave: 'toast-md-slide-out',
@@ -127,9 +125,9 @@ Config.setModeConfig('wp', {
 
   spinner: 'circles',
 
-  tabbarPlacement: 'top',
+  tabsHighlight: false,
-
+  tabsPlacement: 'top',
-  tabSubPages: true,
+  tabsHideOnSubPages: true,
 
   toastEnter: 'toast-wp-slide-in',
   toastLeave: 'toast-wp-slide-out',

src/config/test/config.spec.ts

@@ -105,7 +105,7 @@ export function run() {
     config.setPlatform(platform);
 
     expect(config.get('mode')).toEqual('md');
-    expect(config.get('tabbarPlacement')).toEqual('top');
+    expect(config.get('tabsPlacement')).toEqual('top');
   });
 
   it('should override mode settings from platforms setting', () => {
@@ -120,7 +120,7 @@ export function run() {
     config.setPlatform(platform);
 
     expect(config.get('mode')).toEqual('md');
-    expect(config.get('tabbarPlacement')).toEqual('top');
+    expect(config.get('tabsPlacement')).toEqual('top');
   });
 
   it('should get boolean value from querystring', () => {
@@ -231,27 +231,27 @@ export function run() {
 
   it('should override ios mode config with user platform setting', () => {
     let config = new Config({
-      tabbarPlacement: 'hide',
+      tabsPlacement: 'hide',
       platforms: {
         ios: {
-          tabbarPlacement: 'top'
+          tabsPlacement: 'top'
         }
       }
     });
     let platform = new Platform(['ios']);
     config.setPlatform(platform);
 
-    expect(config.get('tabbarPlacement')).toEqual('top');
+    expect(config.get('tabsPlacement')).toEqual('top');
   });
 
   it('should override ios mode config with user setting', () => {
     let config = new Config({
-      tabbarPlacement: 'top'
+      tabsPlacement: 'top'
     });
     let platform = new Platform(['ios']);
     config.setPlatform(platform);
 
-    expect(config.get('tabbarPlacement')).toEqual('top');
+    expect(config.get('tabsPlacement')).toEqual('top');
   });
 
   it('should get setting from md mode', () => {
@@ -259,7 +259,7 @@ export function run() {
     let platform = new Platform(['android']);
     config.setPlatform(platform);
 
-    expect(config.get('tabbarPlacement')).toEqual('top');
+    expect(config.get('tabsPlacement')).toEqual('top');
   });
 
   it('should get setting from ios mode', () => {
@@ -267,7 +267,7 @@ export function run() {
     let platform = new Platform(['ios']);
     config.setPlatform(platform);
 
-    expect(config.get('tabbarPlacement')).toEqual('bottom');
+    expect(config.get('tabsPlacement')).toEqual('bottom');
   });
 
   it('should set/get platform setting from set()', () => {
@@ -275,10 +275,10 @@ export function run() {
     let platform = new Platform(['ios']);
     config.setPlatform(platform);
 
-    config.set('tabbarPlacement', 'bottom');
+    config.set('tabsPlacement', 'bottom');
-    config.set('ios', 'tabbarPlacement', 'top');
+    config.set('ios', 'tabsPlacement', 'top');
 
-    expect(config.get('tabbarPlacement')).toEqual('top');
+    expect(config.get('tabsPlacement')).toEqual('top');
   });
 
   it('should set/get setting from set()', () => {
@@ -286,9 +286,9 @@ export function run() {
     let platform = new Platform(['ios']);
     config.setPlatform(platform);
 
-    config.set('tabbarPlacement', 'top');
+    config.set('tabsPlacement', 'top');
 
-    expect(config.get('tabbarPlacement')).toEqual('top');
+    expect(config.get('tabsPlacement')).toEqual('top');
   });
 
   it('should set ios platform settings from settings()', () => {