i have a bottom tab bar which has 4 tabs(home,about,contact,more) following is the code of tabs page.
ts:
@Component({
template: <page-more [hidden]="more"></page-more> <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab> <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab> <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab> <ion-tab (ionSelect)="more1()" tabTitle="More" tabIcon="more"></ion-tab>
})
export class TabsPage {
tab1Root: any = HomePage;
tab2Root: any = AboutPage;
tab3Root: any = ContactPage;
tab4Root: any = MorePage;
more: boolean = true;
constructor(public navCtrl: NavController) {
}
more1() {
if (this.more == true) this.more = false; else this.more = true;
}
gallery() {
this.navCtrl.push(GalleryPage);
}
}
And my ‘page more’ Component html:
<ion-footer>
<ion-toolbar position="bottom">
<ion-segment>
<ion-segment-button title="Gallery" value="all" (click)="gallery()">
<ion-icon name="images"></ion-icon>
</ion-segment-button>
</ion-segment>
</ion-toolbar>
when i click on more on tab bar, page more will be show on top of the current tab bar .After click event on ‘Gallery’ it redirects to gallery page it’s all good till now ,but my tab bar is missing in Gallery page.