Ionic 2 - フッタ＆サブフッタ＆コンテンツエリアのタブ

Question

メインコンテンツエリアが同じである間にタブがサブフッタスペースを変更するページを実装する必要がある場合は、Ionicのアプローチは何ですか？（そこにはGoogleマップとタブがありますユーザーがそれに適用できるさまざまな機器を変更しています）。

イオンフレームワークからすべてのドキュメントを読みましたが、必要なパターンを検索する方法を理解するのは難しいです。

提案がありますか？

Answer 1

最良のオプションでは、各タブの異なるページを持って強制するTabs以来Segmentsを使用することです。

ion-footerを下部に作成し、SegmentButtonsを配置することができます。次に、地図の高さをコンテンツの60％などに設定し、残りの高さ（40％）でdivを追加します。そのdivの中に、各セグメントの内容を配置します。コンポーネントのコードで

<ion-header> 
    <ion-navbar color="primary"> 
     <ion-title>Your PageName</ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content> 

    <!-- Map section --> 
    <div class="map" style="height:60%;"> 
     <!-- Here you would display the map --> 
    </div> 

    <!-- Additional UI section --> 
    <div class="additional-div" style="height:40%;"> 

     <div [ngSwitch]="selectedSection"> 

      <div *ngSwitchCase="'tabButtonOne'"> 
       <!-- Content to show when the fist tab button is selected --> 
       <!-- ... --> 
      </div> 

      <div *ngSwitchCase="'tabButtonTwo'"> 
       <!-- Content to show when the second tab button is selected --> 
       <!-- ... --> 
      </div> 

      <div *ngSwitchCase="'tabButtonThree'"> 
       <!-- Content to show when the third tab button is selected --> 
       <!-- ... --> 
      </div> 

     </div> 

    </div> 

</ion-content> 
<ion-footer> 
    <ion-toolbar color="primary"> 
     <ion-segment [(ngModel)]="selectedSection" color="light"> 
      <ion-segment-button value="tabButtonOne"> 
       Tab button 1 
      </ion-segment-button> 
      <ion-segment-button value="tabButtonTwo"> 
       Tab button 2 
      </ion-segment-button> 
      <ion-segment-button value="tabButtonThree"> 
       Tab button 3 
      </ion-segment-button> 
     </ion-segment> 
    </ion-toolbar> 
</ion-footer> 

そして、我々は選択したセグメントの値を格納するために使用するプロパティ：

@Component(...) 
export class YourPage { 

    // Select the first segment by default... 
    public selectedSection = 'tabButtonOne'; 

    // ... 
} 

それはこのようなものになるだろう