How can we display multiple tabs in ionic 2 app?

Question

Hi all I am new to ionic 2,How can we use multiple tabs in my app,

• My plunker for reference :- My Plunker , is there any possibility to use multiple tabs?
• in plunker tabs-page we have used two ion-tabs but only one tab is displaying, another one tab is not visible.
• what we exactly looking for, we just need to use multiple tabs and multiple tabs are need to be visible in the page...
• we don't know where we did the mistake and how it's works , is there any possible to use multiple tabs in a app...

My ion-tabs code:-

<ion-tabs>
   <ion-tab tabIcon="apps" [root]="tab3Root"></ion-tab>
</ion-tabs>

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Tab 1" tabIcon="pulse"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Tab 2" tabIcon="pulse"></ion-tab>
</ion-tabs>

• the above two tabs are need to be visible

In plunker this below ion-tab is not displaying:-

<ion-tabs>
    <ion-tab tabIcon="apps" [root]="tab3Root"></ion-tab>
</ion-tabs>

• if any one know the solution please help us, and update the plunker as well to know the exact solution thanks...

Answer 1

It Can done by using CSS and making the visible. Follow below code and plunker link

HTML

<ion-tabs tabs-only>
 <ion-tab tabIcon="apps" [root]="tab3Root"></ion-tab>
</ion-tabs>

<ion-tabs tabs-only2 >
 <ion-tab [root]="tab1Root" tabTitle="Tab 1" tabIcon="pulse"></ion-tab>
 <ion-tab [root]="tab2Root" tabTitle="Tab 2" tabIcon="pulse"></ion-tab>
</ion-tabs>

CSS

ion-tabs[tabs-only] .tabbar {
    position: fixed;
    bottom: 0;
    height: auto;
    visibility: visible;
    opacity: 1;
    z-index: 111;
    height: 85px;
}

ion-tabs[tabs-only] {
    margin-bottom: 20px;
    contain: none;
    top: 85%;
}