ヘッダーにタブを配置する

Question

ページの下部に他のタブがあるので、ページのヘッダーにいくつかのタブを入れようとしていますが、それらを入れたときには、nav-barのイオンタイトルは次のようになります：ion-navbarまた、隠されたチームワークページの内容は、この

のように表示されていないと私は、この問題を解決することができますどのようにそれがこの

のようになりたいですか？

が、これは、ユーザーに混乱を招くかもしれない上部と下部の両方のタブを持つ私のコード

<ion-header> 

    <ion-navbar > 

     <button ion-button menuToggle > 
     <ion-icon name="menu"></ion-icon> 
     </button> 

    <ion-title >Boards </ion-title> 

    <ion-tabs tabsPlacement="top"> 
     <ion-tab [root]="tabFavorite" tabTitle="FAVORITE" ></ion-tab> 
     <ion-tab [root]="tabTeamwork" tabTitle="TEAMWORK" ></ion-tab> 
     <ion-tab [root]="tabFollowed" tabTitle="FOLLOWED" ></ion-tab> 
     <ion-tab [root]="tabShared" tabTitle="SHARED WITH ME" ></ion-tab> 
    </ion-tabs> 

    <ion-searchbar ></ion-searchbar> 

    <ion-buttons end> 
     <button ion-button ><ion-icon name="search"></ion-icon></button> 
    </ion-buttons> 

    </ion-navbar> 


</ion-header> 

Answer 1

です。

つまり、Segmentを使用して上部のナビゲーションを[ボード]タブに限定し、Toolbarを使用してナビゲーションバー内に配置することができます。

<ion-header> 

    <ion-navbar> 

    <button ion-button menuToggle> 
     <ion-icon name="menu"></ion-icon> 
    </button> 

    <ion-title>Boards</ion-title> 

    <ion-searchbar></ion-searchbar> 

    <ion-buttons end> 
     <button ion-button><ion-icon name="search"></ion-icon></button> 
    </ion-buttons> 

    <ion-toolbar no-border-top> 
     <ion-segment [(ngModel)]="segment" (ionChange)="update()"> 
     <ion-segment-button value="favorite"> 
      Favorite 
     </ion-segment-button> 
     <ion-segment-button value="teamwork"> 
      Teamwork 
     </ion-segment-button> 
     <ion-segment-button value="followed"> 
      Followed 
     </ion-segment-button> 
     <ion-segment-button value="shared-with-me"> 
      Shared with me 
     </ion-segment-button> 
     </ion-segment> 
    </ion-toolbar> 

    </ion-navbar> 

</ion-header> 

私はあなたの問題を正しく理解していますか教えてください！