Sidemenu & Tabs Together?

Ionic Framework ionic-v3
15

Ok so I think I understand now. You want to have some pages inside of tabs and be able to navigate to each of these pages from the sidemenu and continue to show the tabs at the bottom. Correct me if I am still not understanding.

Here is something you could do in this case. I am using the conference app as a base. You can navigate to the main tabs page and pass an index param like this (note that I am using TabsPage, not the root page of the tab) when the user clicks on a menu item:

constructor() {
  this.pages = [
    { title: 'Schedules', component: TabsPage, index: 0, icon: 'calendar', hide: false },
    { title: 'Speakers', component: TabsPage, index: 1, icon: 'person-remove', hide: false },
  ];
}

Then the markup for the menu items:

<button ion-item menuClose *ngFor="#p of pages" (click)="openPage(p)">
  <ion-icon item-left [name]="p.icon"></ion-icon>
  {{p.title}}
</button>

Which calls openPage and passes an index through the params:

openPage(page) {
  let nav = this.app.getComponent('nav');
  nav.setRoot(page.component, {index: page.index});
}

So then in the constructor for the TabsPage you can check for this index param:

constructor(navParams: NavParams) {
  // set the default index to 0, the first tab
  this.myIndex = 0;
  if (navParams.data.index) this.myIndex = navParams.data.index;
}

And finally in the tabs component (TabsPage) you can add the selectedIndex attribute which will change which tab is displayed based on the myIndex variable:

<ion-tabs [selectedIndex]="myIndex">
  <ion-tab [root]="tab1Root" tabTitle="Schedule" tabIcon="calendar"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Speakers" tabIcon="contacts"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Map" tabIcon="map"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
</ion-tabs>

Does this solve your problem? If you think it is too complex please create an issue for it and we can discuss this some more: http://ionicframework.com/submit-issue/

4 Likes