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