Tab-bar position ionic v4


#1

Hi,

I have a problem with ionic version 4.rc-0 and tab-bar position.
Every thing is correctly displayed when you add directly or

But if you want to be dynamic like :
<ion-tab-bar [slot]=“tabplacement”>
(tabplacement is changed in the constructor)
it always display the tab bar at the bottom.

I tested it with the tab starter in ionic cli.

Any idea to correct this ?

Thank you !


#2

The docs used to mention that the slot value must always be bottom. You position the <ion-tabs> element instead.


#3

Thank you, you solved my issue ! :slight_smile:


#4

My ugly workaround:

<ion-tabs>

  <ion-tab-bar slot="bottom" color="primary" *ngIf="platform.is('mobile')">
    <ion-tab-button tab="home" layout="icon-start">
      <ion-icon name="home"></ion-icon>
      <ion-label>{{ 'HOME' | translate }}</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

  <ion-tab-bar slot="top" color="primary" *ngIf="platform.is('desktop')">
    <ion-tab-button tab="home" layout="icon-start">
      <ion-icon name="home"></ion-icon>
      <ion-label>{{ 'HOME' | translate }}</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

</ion-tabs>

#5

^ This is the route I had to take as well