CODEWITHSUNDEEP
tabsionic4
vinod
vinod

Reputation: 270

Use the tabs position bottom and top in same page Ionic 4

I would like to achieve the tabs position top and bottom in a single page in ionic 4. At the moment either any one of those is working in a single component/page.

Upvotes: 0

Views: 2722

Answers (1)

Sergey Rudenko
Sergey Rudenko

Reputation: 9227

You should be able to do so by just adding another ion-tab-bar, so that one occupied "top" slot and another "bottom" slot:

<ion-tabs>

  <ion-tab-bar slot="top">
    <ion-tab-button tab="tab1">
      <ion-icon name="flash"></ion-icon>
      <ion-label>Tab One</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab2">
      <ion-icon name="apps"></ion-icon>
      <ion-label>Tab Two</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab3">
      <ion-icon name="send"></ion-icon>
      <ion-label>Tab Three</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab4">
      <ion-icon name="flash"></ion-icon>
      <ion-label>Tab Four</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab5">
      <ion-icon name="apps"></ion-icon>
      <ion-label>Tab Five</ion-label>
    </ion-tab-button>

  </ion-tab-bar>

</ion-tabs>

Then make sure you setup routing correctly inside tabs.router.module

https://stackblitz.com/edit/ionic4-angular-tabs-template-rag89y

Upvotes: 3

Related Questions