Using sidemenu and tabs together

ionic-v1
21

So, I elaborated on this example and delved a bit on the back issue (which is the only issue left, actually). Everything else regarding view structure is amazing (thnx to all of you guys!).

There are basically two cases where I wanted the back arrow to appear in the header (root ion-nav-bar) but they don’t. It’s very important IMO to note that although the back arrow doesn’t appear, the backbutton behaviour is still honoured (device hardware backbutton or browser backbutton) which means ui-router knows what’s going on and can answer accordingly.

  1. Consider the following state configuration:

    $stateProvide
    .state(‘tab’, {
    url: ‘/tab’,
    abstract: true,
    templateUrl: ‘tabStructure.html’
    })
    .state(‘tab.child-1’, {
    url: ‘/child-1’,
    templateUrl: ‘child-1.html’
    })
    .state(‘tab.child-2’, {
    url: ‘/child-2’,
    templateUrl: ‘child-2.html’
    });

If I’m at /tab/child-1 and navigate to /tab/child-2, either through the tab itself or through another link, the back arrow doesn’t appear at the nav-bar.

  1. Consider this other state configuration:

    $stateProvide
    .state(‘tab’, {
    url: ‘/tab’,
    abstract: true,
    templateUrl: ‘tabStructure.html’
    })
    .state(‘tab.child-1’, {
    url: ‘/child-1’,
    templateUrl: ‘child-1.html’
    })
    .state(‘somethingElse’, {
    url: ‘/somethingElse’,
    templateUrl: ‘somethingElse.html’
    });

If I’m at /tab/child-1 and navigate to /somethingElse, the back arrow doesn’t appear at the nav-bar.

Both scenarios can be easily tested on the last revision of the codepen or on this one I modified (updated to beta3 and added a link to the “about” tab at the “tabs/home” view.

I can’t think of a reason why this behaviour would be the expected one, but I’m open to discussion. If it is considered WaD by Ionic, I’ll have to implement it on my own.

22

yep ionic-back-button is very buggy it behaves very inconsistently, but i guess device back button works perfectly.

23

I can’t get it working out there. Can you please provice a starting sample (on github) ready to go?
Once I imported everything into my project i get a full screen doing-nothing left sidebar.
Rly don’t know why.

Thanks,

EDIT: solved. I’m working on it here.

24

Hi,

All of your examples are wrapping the tabs inside the sidemenus.
Is there an example where the tabs is the main view and the side menu is a sub view.
Because it doesn’t work for me.
Here is an example I made in pen:

thank you

25

I don’t want* to be off topic because I really enjoy this thread and its helping to solve the issues i’m dealing with- but why do some many people on here use codepen? There are better alternatives such as plnkr.co.

They are more collaborative and allow multiple files not to mention it means less re-factoring (for html and js).

(Tab Bar Preview)
http://plnkr.co/qYMCrt

(Side Bar)
http://plnkr.co/0RXSDB

26

@Hans I agree with you on the point that plnkr and some others have more richful and complex features, but most of the times the examples we need to build are simple, and the overhead of those alternatives come as a burden, thus most people prefer Codepen.
I am one of those people, and the times I’ve tried using plnkr or anything else I’ve lost more time with the tool than building what I wanted in the first place, and so in the end I always end up going back to a tiny codepen example.

1 Like
27

Good point @fredericogalvao. Personally I’m still new to developing (been at it for about a year in total but only 6-8 months actively coding daily).So naturally getting into this framework has had a learning curve.

In any-case I really like this framework and the community here. If anyone is interested in collaborating I’ve put together this repro of templates (https://github.com/HansUXdev/IonicFramework-Templates ) I’ve found across the forums. I plan to later incorporate more native looking templates that I’ve been working on.

1 Like
28

Well, I think I’ve found I pretty good (workaround) solution.

This is the post about it and the working pen.

29

Hey guys,
This is really good… I have a different requirement.

Application does not start with the tabs.
The tabs screen however should be loaded from the menu.

Any suggestions guys? Thanks in advance

30

@lilford it’s here. From the home page: go to the first section (there’s only the sidemenu here). After that, click “Second Section”, and you’re into a SideMenu + Tabs section.

Just link to the Second Section from the SideMenu and you’re done.

Cheers,

31

@mircobabini Thanks mate… Got it to work :smile: Cheers :slight_smile:

1 Like
32

Just an update for everyone… here is a codepen that demonstrates the simplest (I think) way to use ion-side-menus and ion-tab together.

3 Likes
33

thanks for your inputs. Can I have a downloadable code as I am able to understand js but confused with html structure. still only either of the navigation menu works.

34

I’ve taken some of the above examples and simplified them into what I personally needed to use. This thread helped me solve my problem, so I figured this could help someone else too!

I also transferred to using Plunker instead of CodePen for ease of use/editing/readability. Check it out here.
Plunker isn’t as reliable with rendering though, so here’s a CodePen as well.

Check out the link if this doesn’t make sense or to jump straight to the example:
My example includes a left menu throughout the project with a single page that has a tabbed navigation. From the tabbed navigation, you can click through a list to a detail page which correctly displays ONLY a back button (not a menu button, since you should go back to the tabbed view from the detail view).

3 Likes
35

FYI - this approach no longer works as of beta14

2 Likes
36

is it possible to have a different side menu for each tab? I am not sure how to go about setting that up, there there a template i can take a look at?

37

Thank you for All these findings, it’s great.

38

Here’s an update to the codepen for Ionic 1.0.1

1 Like
39

Hey Emily, thank you for the tab + sidemenu code, really nice and helped me a lot!

40

2 Major Urgent Questions! :smile:

For http://codepen.io/emilyemorehouse/pen/raYLez

  1. Template
    Which ionic template does it work for? (ionic start myApp (demo , sidemenu, tabs)?

  2. Files to edit
    Which files do I edit in the folder for:
    a. HTML (www/index.html?) do I remove the existing or add to the existing?
    b. JS (www/js/app.js?) do I remove the existing or add to the existing?

Thanks!

image
Pasted image711×423 106 KB