i am trying ionic from past couple of days and i am trying to make an app with sidemenu and tabs together but i am not able to put it together
it should look something like this
Whatever i try i am not able to get it working all i managed to make was this http://codepen.io/anon/pen/CAsKn
which is far from what i intended above .
can anyone please help me and guide me in right direction can you please give some code samples to build upon
please help
I forked your example and got the sidemenu working. It could use a little beautification. http://codepen.io/gnomeontherun/pen/tbvdH
You had the sidemenu inside of one of the tabs pages, where you wanted to put it as the root element and have the ion-nav-view load into the ion-side-menu-content directive. $ionSideMenuDelegate is now available and has to be used to trigger the sidemenu to open or close. I added a controller and openMenu() method that handles this.
i think side menu is broken as one of its menu item is not visible
The functionality is working, I just didn’t use the ion-header-bar component and so it didn’t add the padding. I updated my example http://codepen.io/gnomeontherun/pen/tbvdH
Thanks @gnomeontherun. Do you know how to add a right hand side menu to the ionic-angular-cordova-seed project on github: https://github.com/driftyco/ionic-angular-cordova-seed without breaking the tabs or the back arrow history? Many have tried, all have failed. Any advice would be appreciated.
@gnomeontherun thanks for help, here i managed to get it working in some way can you please have a look and give some guidance if i am doing it in right way
@programming_kid you will want to add menu-close to your links in the left bar so it will close the side menu upon click/tap. You may also want to use nav-clear, but that depends on if you want the back button and animations or not.
@mbyrne History is based on standard links. There is a new nav-clear directive that you can apply to any link that will stop the back button. I added it to the Home in the left side menu, so if you go somewhere and then Home, it won’t show the back arrow. http://codepen.io/gnomeontherun/pen/tbvdH
thank you! I will check this out right now.
So I have worked with what you posted and it is very useful. One question though is if I want something on the side menu, like a link to a Settings page, how would I define the state and view in the index.js?
You have the all the side menu links going to pages that exist only in the tab structure, how would I link to another non-tab page (that is, appended to index.html as a template called e.g. settings.html)?
I already created that page (it is viewable if I temporarily rename it as one of the tabs), changed the anchor in the side menu code <a class="item" menu-close href="#/search">Search</a> and tried to update the ui-router state provider in index.js but I think I have something about the syntax wrong with the link in the side menu and/or in the state provider. How would you write this
.state('search', { url: "/search", views: { 'search': { templateUrl: "search.html" } } })
to reference a page that is not on the tabs, but that is an html template within the index.html page?
I know I am doing something syntactically wrong because of my lack of understanding of ui-route and state and appreciate any guidance.
I’m not an expert on ui-router either, haven’t used it until I started with Ionic last week. However I’ve updated my codepen to route to a new view not in the tabs. You can see I added two new states to the top (search and settings) and then added templates to the bottom of the HTML and updated the navigation.
This is fantastic. One question though is that the tab disappears for the settings and search pages. How can I keep the same tabs for the side menu pages?
Tabs are declared inside of the tabs abstract template. Since the search/settings views aren’t children of the tabs state, they won’t have the tabs. You would either have to make a tab that has multiple children states inside of it (sounds kind of tricky and delicate) or manually add tabs to the footer.
I think your best option is to make a footer that has the same icon/text links as the tabs, because the tab directive creates one pane per tab.
All right, that gets to the heart of the issue with tabs and side menu. Manually adding a tab footer to each side menu page makes sense, but doesn’t seem very DRY. I think I will attempt to make a tab with multiple children and see how quickly I trainwreck things…
Again, I really appreciate the guidance and help.
okay, so I tried manually adding the tab bar and that worked fine too.
Awesome, to make it DRY make it a template and use ng-include.
I got this http://codepen.io/norman784/pen/Ahwdg but seems that ion-tabs but seems that it mess with the side menu and you got an empty left menu bar alto with the list got another issue that I described here Side menu + List + tab bar issue (side menu stop working)
The most updated pen is at:
@gnomeontherun wrote it and it solves tabs and side menu (s) (there is a left and right menu)
It was updated by @gnomeontherun to show the case of having the side menu items (in this pen it is the right menu items) link to a page that is not under one of the tabs, like the those left menu items are.
If you want the right side items to have a tab, you can add that manually( I cut and pasted my tabs code from tabs.html into that side menu item’s template) or you can put those items under one of the tabs in the index.js $statProvider code, just copy the format of, for example, how the “facts” view is defined and put the view of the side menu item under a tab in the same way.
If you don’t put the side menu page under a tab and want to add a tab bar to it manually into its template, you can also us ng-include to keep it Don’t Repeat Yourself DRY. Other wise you will possibly, depending on how many non-tab pages you have, need to update your tabs in multiple places which can lead to errors.
I haven’t used ng-include (or would it be data-ng-include) in my situation. I have found that if I put all the side menu pages under one tab ( in this case they all generally pertain to settings and help) then when I navigate the side menu items, they retain back arrow history too, which is feels elegant and useful for how I am using it. Bonus.
@gnomeontherun has mentioned that doing this might cause issues with child states, but I don’t know enough yet to anticipate what problems this might cause.