Как мы можем отображать несколько вкладок в приложении ionic 2?

Question

Привет всем Я новичок ионному 2, Как мы можем использовать несколько вкладок в моем приложении,

• Мой plunker для справки: - My Plunker, есть ли возможность использовать несколько вкладок?
• in plunker tabs-page мы использовали два ion-tabs, но только одна вкладка отображается, другая одна вкладка не visible.
• что мы точно ищем, нам просто нужно использовать multiple tabs и несколько вкладок должны быть на странице visible ...
• мы не знаем, где мы сделали ошибку, и как это работает, есть ли можно использовать несколько вкладок в приложении ...

Мой ion-tabs код: -

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

• выше двух вкладок должны быть видны

В plunker этом ниже ионная вкладка не отображается: -

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

• , если любой знает решение, пожалуйста, помогите нам, и обновить plunker, а также знать точное решение, благодаря ...

Answer 1

Это можно сделать, используя CSS и сделав visible. Следуйте ниже код и 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%; 
}