Ionic 2上部と下部のタブ

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

何か：

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

すべてのアイデア？

2016-12-09 Mehdi Guelloub

私はあなたが私に説明できることを理解できません –

あなたは、タブのレイアウト（下部のタブ）を組み合わせて、このようないくつかの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の面では結果はスクリーンショットに似ています。

出典

2016-12-09 18:09:23 sebaferreras

うん、可能、いいアイデア！私はそれについて考えなかった... ur迅速な答えをありがとう –

'' segment''を使うのは良い考えではないと思う場合があります。たとえば、 '' ionViewDidLoad''の後にのみ呼び出されるタブのそれぞれに '' http''要求を持っていたいとします。このソリューションは、セグメントを開かなくてもすべての "http"要求を送信します。私も同様の状況がありました。私はタブの内側にタブを選択しました。アニメーションやその他のイオンページコールバックはまだ利用可能です。 – raj

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

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

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

出典

2017-01-10 17:45:50 CharithW

これは私のために働く。受け入れられた答えでなければなりません。 – rattanak

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

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

コードsource here。

出典

2017-06-19 17:43:17

これはイオンv3.9.2のために私のために働いてくれてありがとう – BlackDivine

答えて

関連する問題