Ionic 2 Tabs Above and Below

Question

I would like to make a tabs component that has several tabs at the top of the screen, and some at the bottom, is there any way to achieve this?

Something like that:

I tried using two instances, but I could not do this, and I think it will be very difficult to synchronize them with each other.

Any ideas?

Answer 1

There is also a Component tab at the top of the page. Assuming 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 allows you to reposition the tab bar.

Answer 2

You can combine the tab layout (tabs at the bottom) and add a toolbar at the top of each page with several Segment of such components:

 <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> 

This way, you will have tabs at the bottom (tab component) and tabs at the top (segment header). I don’t know if this makes sense in the context of your application, but from the point of view of the user interface, the result will be very similar to the screenshot provided.

Answer 3

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

• Open the src\app\app.module.ts file
• Passing tabsPlacement:'bottom' as the object value for onicModule.forRoot() .
• Pass the object as the second argument.
• You can use 'top' instead of 'bottom' to display at the top
  Hope this works for you !!!

code source here .