Tab-bar position ionic v4

Ionic Framework
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.

1 Like
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>
1 Like
5

^ This is the route I had to take as well

6

In the version we use (4.0.0.rc1) the slot=“top” works, but moves the tabbar in the top of the whole page and not under the header just like in v3. Is there any workaround for this?

7

i have the <ion-header> in the tabs.page.html and removed from all of the tab child pages, with <ion-title> set to change with the ion-tabs (ionTabsDidChange) event calling the getSelected() method. I also set up my <ion-tab-button>s dynamically

<ion-header>
    <ion-toolbar>
        <ion-title>{{ pageTitle }}</ion-title>
    </ion-toolbar>
</ion-header>
<ion-tabs #tabs (ionTabsDidChange)="setTitle()">

</ion-tabs>

public tabsList: any[] = [{
    name: 'tab1',
    label: 'Tab One',
    icon: 'home'
    }, {
    name: 'tab2',
    label: 'Tab Two',
    icon: 'apps'
    }, {
    name: 'tab3',
    label: 'Tab Three',
    icon: 'send'
}];

@ViewChild(IonTabs)
public tabs: IonTabs;

constructor(private route: ActivatedRoute) {}

setTitle() {
    const currentTab: string = this.tabs.getSelected();
    const matchingTab: string = this.tabsList.filter((tab: any) => tab.name === currentTab)[0]; //uses the first array element as the currentTab
    this.pageTitle = matchingTab.label;