Sidemenu & Tabs Together?

Ionic Framework ionic-v3
1

Hi guys,

I’ve been studying both example apps, the conference app and the Ionic 2 tutorial app (which by the way, doesn’t appear to exist at the moment, I just tried to build the tutorial template again in the command line using ‘ionic start MyIonic2Project tutorial --v2’ but it said ✗ Error: No starter template named “tutorial”. Luckily I had a build I had already done that I could use).

I’ve been trying to combine both approaches so that I have a side menu and tabs like I’ve done in Ionic 1. I’ve had some progress by adding this code to the bottom of the hello-ionic.html page but I’m struggling with the routing and adding extra pages that should be called on tap of one of these tab items:

<ion-tabs>
  <ion-tab [root]="tab1Root" tab-title="Home" tab-icon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tab-title="UI/UX" tab-icon="home"></ion-tab>
  <ion-tab [root]="tab3Root" tab-title="Multimedia" tab-icon="home"></ion-tab>
  <ion-tab [root]="tab4Root" tab-title="Contact" tab-icon="contact"></ion-tab>
</ion-tabs>

In the conference app I can see that the routing has been done in tabs.js:

export class TabsPage {
  constructor(nav: NavController) {
// set the root pages for each tab
this.tab1Root = SchedulePage;
this.tab2Root = SpeakerListPage;
this.tab3Root = MapPage;
this.tab4Root = AboutPage;
  }
}

What would be the best approach here, modifying the sidemenu example to also include tabs?
Thanks in advance for your help

:smile:

1 Like
2

Ok I think I’ve worked it out after studying both examples :smile:

It took me a few days of stripping down the conference app to the barebones to understand what was going on better (just 2 tabs, basic JSON master / detail pattern). Then studying the sidemenu example and trying to add some of those components. I don’t have time to upload it just yet but I might try and upload it onto the Ionic Market if it’s allowed (not sure what the rules are if using some existing code from some of the example apps??)

Basically what you have to do is add the hello-ionic and list imports into your app.js of the conference app like this:

import {HelloIonicPage} from './hello-ionic/hello-ionic';
import {ListPage} from './list/list';

Then in your app.html you need to add this:

<ion-nav id="nav" [root]="root" #content swipe-back-enabled="false"></ion-nav>

<ion-menu [content]="content">

  <ion-toolbar>
    <ion-title>Pages</ion-title>
  </ion-toolbar>

  <ion-content>
    <ion-list>
      <button ion-item *ng-for="#p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

<ion-overlay></ion-overlay>

:slight_smile:

3

Hey, the conference app was updated to include a menu a few days ago. Not sure if you’ve seen that, just letting you know! :smile:

4

Ah great, one less thing to worry about :smile:

I learnt a bunch of stuff by pulling it apart anyway and simplifying things, but thanks!
Thanks

1 Like
5

how to from a index page push to sidemenu & tabs together page ?

in theory , login page should not have a sidemenu , only if user have log in , then they can push to a main page with sidemenu & tabs together

6

It’s all in the latest example of the conference app if you check on github…it has that exact same pattern

:slight_smile:

7

thanks very much ! :blush:

8

Hello I have tested out the newest conference app on Github and have a question, it seems that in iOS the tabs are allows at the bottom, even when you navigate to a details page. Yet on Android this is not the case. Is there not a way to make the tabs persist through out the app, ie always on the bottom. This seemed to be possible in Ionic 1 with each tab keeping track of its own history etc.

9

You should be able to override the tabSubPages to false in the config of the app: http://ionicframework.com/docs/v2/api/config/Config/

1 Like
10

Thanks, I did not see that in the docs. Though when I change the setting to either true or false it still loses the tabs no matter if I use push or setRoot on nav from the sidemenu.

11

I’m confused. Are these pages that you are navigating to from the sidemenu a detail view of a tab?

12

Sorry let me explain better. So I made a test app, it is setup as 3 pages. The first is the tabs page and it contains the other pages, Home and List, as tabs. I have added a sidemenu like the one in the conference app to the app template and js with the root of app being set to tabsPage on load.

This seems to work fine at first, I can switch tabs and open the sidemenu etc. The issue comes when I am trying to navigate from the sidemenu, which at the moment should switch tabs to the correct one and display the needed page, which at the moment is nothing but the root page of that tab, though in the future it might be a subpage. At the same time the tabs should never disappear from the bottom, ie it should be a top level element that is on all pages of the app and clicking a tab goes to the last page in open in its nav stack.

Quick visual of current app:
App–>TabsPage—> Home
| ‘’’’’’’’’’’’’’’’’’’’’ |______> List
|___>Sidemenu

EDIT: Ignore the ‘’’ it is for spacing issues

Crude Drawing:

image
SamplePages.jpg800×600 24.9 KB

13

So it’s still a bit hard for me to visualize the flow. Do you have any example markup of how you’re navigating to these pages or maybe a github repo of it?

14

Yes, I realize that I am not the best at explaining this, sorry. The issue I think just stems from navigating to a tabs root when in the sidemenu (The page that is loaded when you first click a tab).

I am trying to make it so that the root page can be a link in the sidemenu and the app would navigate to that tab. Instead it seems to open the page as if it is a new detail page when using nav.push or as a new page when using nav.setRoot. In both cases the tabbar is missing on that new page.

The other thing I was trying to describe as well was that if the page that was linked in the sidemenu was under tab2 it would select tab2 and goto that page, again without losing the tabbar.

The idea being that the tabbar and sidemenu are ever present ways of navigating around the app.

Again I am likely explaining this badly, sorry.

EDIT: This image, from the iOS conference template, is a good idea of a tabbar on the bottom, even in detail page.
https://github.com/driftyco/ionic-conference-app/raw/master/resources/screenshots/iphone/4.png and is basically what I am getting at in the second part about selecting tab2 and going to that subpage.

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
16

That does indeed fix the issue with sidemenu and tabs navigation. Thanks for helping out with that and trying to decipher my posts.

1 Like
17

Hi Brandy,

The example above is the closest I can find to what I’m after in regards to running Tabs and a Side Menu at once. I wonder if you were able to add any comment to my circumstances below? It would be greatly appreciated.

Using the Conference App as a base, the app would run with the 4 tabs shown at all times. Additionally I want to show more “root” or “top-level” pages in the side menu as well. But they would not be shown in the tabs. Is this possible?

I’ve tried keeping the Conference App as is, adding another “root” page to the side menu and tabs, and then attempted to hide that “root” page on the tabs without luck.

Thank you in advance

Cameron

18

Thats also what i need and it works pretty well.
Is there a way to check to not open a page if i am coming from the same tab. (sidemenu page == tab page)

19

I’m not sure that I fully understand but it sounds like you want a page that has the menu, but not the tabs, and also some pages in tabs. Have you tried looking at how the login and signup pages are set up in the conference app? These pages don’t have the tabs but they show in the side menu. Please let me know if I’m misunderstanding you.

20

Hi Brandy

Thanks for getting back to me.

The login page does not carry the tabs on its page.

What would be terrific , would be a list of 6-7 core pages in the side menu. You could select which 4 core pages are shown in the tabs.

Cameron

1 Like