CODEWITHSUNDEEP
angularionic2
Taha
Taha

Reputation: 1242

placing tabs in the header

I'm trying to put some tabs in the header of the page because I have other tabs at the bottom of the page but when I put them in ion-navbar the ion-title in the nav-bar is hidden also the content of TEAMWORK page doesn't appear like this

enter image description here

and I want it to be like this

enter image description here

How can I solve this issue ?

this is my code 

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

Upvotes: 0

Views: 988

Answers (1)

emroussel
emroussel

Reputation: 1147

Having tabs both at the top and bottom might be confusing to the user.

That being said, you can use a Segment to keep the top navigation specific to the Board tab and you can use a Toolbar to place them inside the navbar. 

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

Let me know if I understood your problem correctly!

Upvotes: 1

Related Questions