Reputation: 1242
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
and I want it to be like this
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
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