Ionic 2 Tabs in the top and the bottom

Question

I would like to make a tabs component which has some tabs in the top of the screen and some in the bottom, is there a way to achieve this?

Something like this:

I tried using two instances but I couldn't make it and I guess it's gonna be very difficult to synchronize between them.

Any Ideas?

Solution 1

You can have TabsComponent in top of your page as well. Assuming that you have imported and declared TabsComponent All you have to do is , add this attribute to your app.module.ts

imports: [
IonicModule.forRoot(MyApp,{tabsPlacement: 'bottom'})
],

This actually only lets you to change the position of Tabs bar.

Solution 2

You can combine a tabs layout (tabs at the bottom) and add a toolbar at the top of each page with a few Segment components like this:

<ion-header>
  <ion-toolbar>
    <ion-segment [(ngModel)]="topTab" color="secondary">
      <ion-segment-button value="camera">
        <ion-icon name="camera"></ion-icon>
      </ion-segment-button>
      <ion-segment-button value="bookmark">
        <ion-icon name="bookmark"></ion-icon>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

That way you'd have tabs at the bottom (tabs component) and tabs at the top (header with segments). I don't know if that makes sense in the context of your app, but in terms of UI the result would be pretty similar to the screenshot provided.

Solution 3

If you are using Ionic 2 or 3 here is the way-

1. Open src\app\app.module.ts file
2. Pass tabsPlacement:'bottom' as an object value to the onicModule.forRoot() function.
3. Pass object as the second argument.
4. Can use 'top' in place of 'bottom' to appear at the top
   Hope it will work for you!!!

code source here.

Comments

[Mehdi]

Hmmm yeah possible, good idea! I didn't think about that... Thank you for ur quick answer

[raj]

There are some cases in which it would be a bad idea to use segment i think. For instance if I want have an http request in each one of the tabs which gets called only after ionViewDidLoad . This solution send all http request even without opening the segment. I had a similar situation , I chose tabs inside tabs method which works well. And I have animation and other ionic page callbacks still available.