R. Mani Selvam R. Mani Selvam - 1 year ago 95
CSS Question

How can we display multiple tabs in ionic 2 app?

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 Source

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%;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download