2017-02-07 4 views
2

こんにちは、私たちは私のアプリで複数のタブを使用することができますどのように、2をイオン性に新しいですすべて、ionic 2アプリに複数のタブを表示するにはどうすればいいですか?

  • 参照のための私のplunker: - My Plunker、複数のタブを使用するすべての可能性はありますか?
  • の中にtabs-page 2つを使用しましたが、1つのタブのみが表示されています。もう1つのタブは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を更新してください...
+0

この例を参照してください。.. http://codepen.io/ionic/pen/odqCz –

+0

感謝あなたのコメントのために@ sahil ...私はこの 'codepen'はイオンのものだと思います、私たちはイオン2を探しています... –

+0

あなたのコードのフィドルを作ることができれば帽子は素晴らしいでしょう..これをチェックしましたか?https://ionicframework.com/docs/v2/api/components/tabs/Tabs/ ?? –

答えて

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%; 
} 
関連する問題