Ionic 2上部と下部のタブ

Question

tabs componentには、画面の上部にいくつかのタブがあり、下部にはいくつかのタブがあります。これを実現する方法はありますか？このような

何か：

私は2つのインスタンスを使用してみましたが、私はそれを作ることができなかったと私はそれがつもりはそれらの間で同期させることは非常に難しいことだと思います。

すべてのアイデア？

Answer 1

あなたは、タブのレイアウト（下部のタブ）を組み合わせて、このようないくつかのSegmentコンポーネントと、各ページの上部にあるツールバーを追加することができます：あなたはのタブを持っているだろうそのように

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

下部（タブのコンポーネント）と上部のタブ（セグメントのヘッダー）。私はあなたのアプリのコンテキストでそれが意味を成しているのかどうかはわかりませんが、UIの面では結果はスクリーンショットに似ています。

Answer 2

ページ上部にTabsComponentを配置することもできます。インポートし、あなたがしなければならないが、これは実際にはあなたがタブバーの位置を変更することができます

imports: [ 
IonicModule.forRoot(MyApp,{tabsPlacement: 'bottom'}) 
], 

あなたapp.module.tsにこの属性を追加しているTabsComponent 宣言していると仮定すると 。

Answer 3

あなたはイオン2または3を使用している場合は、ここでway-

1. オープンsrc\app\app.module.tsファイル onicModule.forRoot()関数にオブジェクトの値として
2. パスtabsPlacement:'bottom'にあります。
3. オブジェクトを2番目の引数として渡します。
4. 'bottom'の代わりに'top'を使用して、上部に表示することができます
   あなたのためにうまくいきますように!!!

コードsource here。