Tabs input properties don't work


#1

Example:

<ion-tabs #damagesTabs [tabsPlacement]="top" [tabsLayout]="icon-hide">
  <ion-tab [root]="tab0Root" tabTitle="{{'checks.title' | i18n}}"></ion-tab>
  <ion-tab [root]="tab1Root" tabTitle="{{'bodyPartsMain.title' | i18n}}"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="{{'tire.title' | i18n}}"></ion-tab>
</ion-tabs>

In this example the defined value for tabsPlacement is overwritten by the code defined in tabs.js lifecycle method ngAfterViewInit

Tabs.prototype.ngAfterViewInit = function () {
        var _this = this;
        this._setConfig('tabsPlacement', 'bottom');
        this._setConfig('tabsLayout', 'icon-top');
        this._setConfig('tabsHighlight', this.tabsHighlight);
        this._setConfig('tabbarPlacement', 'bottom');
        this._setConfig('tabbarLayout', 'icon-top');
        if (this.tabbarPlacement !== undefined) {
            console.warn('Input "tabbarPlacement" has been deprecated. Please use "tabsPlacement" instead.');
            this.setElementAttribute('tabsPlacement', this.tabbarPlacement);
            this.tabsPlacement = this.tabbarPlacement;
        }
        if (this._config.get('tabbarPlacement') !== null) {
            console.warn('Config option "tabbarPlacement" has been deprecated. Please use "tabsPlacement" instead.');
            this.setElementAttribute('tabsPlacement', this._config.get('tabbarPlacement'));
        }
        if (this.tabbarLayout !== undefined) {
            console.warn('Input "tabbarLayout" has been deprecated. Please use "tabsLayout" instead.');
            this.setElementAttribute('tabsLayout', this.tabbarLayout);
            this.tabsLayout = this.tabbarLayout;
        }
        if (this._config.get('tabbarLayout') !== null) {
            console.warn('Config option "tabbarLayout" has been deprecated. Please use "tabsLayout" instead.');
            this.setElementAttribute('tabsLayout', this._config.get('tabsLayout'));
        }
        if (this.tabsHighlight) {
            this._platform.onResize(function () {
                _this._highlight.select(_this.getSelected());
            });
        }
        this.initTabs();
    };

L.E.

I tried this version too

<ion-tabs #damagesTabs tabsLayout="icon-hide" tabsPlacement="top">
  <ion-tab [root]="tab0Root" tabTitle="{{'checks.title' | i18n}}"></ion-tab>
  <ion-tab [root]="tab1Root" tabTitle="{{'bodyPartsMain.title' | i18n}}"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="{{'tire.title' | i18n}}"></ion-tab>
</ion-tabs>

But the result is this

<ion-tabs tabslayout="icon-hide" tabsplacement="bottom" class="tabs-ios" ng-reflect-tabs-layout="icon-hide" tabshighlight="false" tabbarplacement="bottom" tabbarlayout="icon-top">
<div class="tabbar show-tabbar" role="tablist" style="bottom: 0px;">
Copied from Google Chrome developer tools

I’m using ionic 2 rc0