Seed with working tab bar on bottom of page *and* working side menu?

ionic-v1
1

Is there an version of the ionic-angular-cordova-seed-master that has its existing bottom tabs (what is in its tabs.html) with back arrow in the header (ui-router to track state and history of each tab separately) AND a working side menu controller with ion-navicon (hamburger) in the header (preferably on the right side of the header)?

I have found many examples of either/or but nothing with both features. Is it possible? ( I have seen posts about issues with adding buttons to headers, etc. and have failed in my attempts to do this.)

Any help pointing me to something that is based on the seed, and is done the ionic way, would be greatly appreciated.

Searching the forum there seems to have been a lot of effort half-solving this, it would be great if there were a definitive template from the team to show how to implement it. And to whatever extent I can help with this, I would be happy to help.

2

Here’s my stab at a sample. It has a view with no side-menu, a view with side menus that has several states : home, tabs, and info

Unfortunately, I’m not able to get any back buttons to work at all. I’ll keep working on it when I can.

3

@Calendee Thank you so much. I will read through it to see what you did and try to understand it. I don’t understand why you didn’t work off the seed template though? I want to end up with a template that can be shared with everyone using what Ionic thinks are best practices.

Again, I really appreciate your input, and I will try to get side menu working in a clean seed template and see how to not have the back buttons break from that.

4

Continuing from this topic, is there a way to put in nested ion-nav-view into ion-tab such as the example (step 2) below?
We want to try to avoid putting all the ion-content for all the tabs’ content in 1 html file.
The following example does not work, as we are struggling with the state ui.

    <ion-tab title="Step 1" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
         <ion-content has-header="true" padding="true">
             <h2>Tab 1 Content</h2>
         </ion-content>
    </ion-tab>

    <ion-tab title="Step 2" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline" href="#/main/tabs/step2>
		<ion-nav-view name="step2"></ion-nav-view>
    </ion-tab>
5

HI, I don’t understand what you are asking. Maybe you could post a photo of a quick pencil sketch of what the tabs would look like in each state. I don’t know that anyone can help you otherwise.

6

Actually, we are interested to find out if there is a way to separate the content of each tab into multiple HTML files, instead of 1 HTML having all the contents of all tabs together.

For example, refer back to http://codepen.io/calendee/pen/JdtuG ,
how do we enhance it further by putting ‘Tab 1 Content’ in tab1.html, and ‘Tab 2 Content’ in tab2.html?

7

This is quite easy to do. You just have a folder (often called “templates” or “partials”. Then you name the file whatever you like. From that sample codepen, you would name the files the same name as the ng-templates:

entry.html , tabs.html, etc.

The templateUrl: 'templates/entry.html', in the app config will find them there.

8

Hi, I hope you can help me get the following to work:

  • bottom tab bar that is always visible
  • one of the tabs should show a pane with a side menu of items, and should keep state when another item is chosen

I have already spent all day trying to get this to work ;|