We are building a ‘sidemenu-style’ app but would like to use a tabbed view in one of the screens. Has anyone managed to do this? We’re using the ui-router and I imagine the tabbed page would need to be a nested view with its own states. Im not sure how to go about building that and was hoping someon…

Here is an example, it probably has a few minor updates to be made with the current beta since it was built a few months ago. [image] Ionic Framework SideMenu, Tabs, Modal, and Navigation Simple scaffolding showing how side menus, tabs, modals, and navigation can work together.... …

Beware that there are a few bugs with Ionic’s latest version (1.0.0-beta.12) in handling tabs and side menus, as described here: [image] Issue: scrollView is null when switching off of tabs view opened by revie on 2014-09-11 closed by revie on 2014-09-15 I'm running into…

After I posted the question above, I managed to build something that works but I wanted to ask a question about states. Right now, my tabs screen has a "home" state that acts as a parent for the tabs navigation. Each tab has its own state that is a child state of the home state, e.g. 'home.tab1', 'h…

If you looked at my Codepen above, what I do is have my “home” screen as an abstract view, and actually make my “tab1” as my default view (and also linked from the side menu). So, the first time you come in, you’re sent to “tab1” automatically. Now, anytime you navigate away from the tab view and …

Yes, the abstract state was what was missing - thanks! I made the link into the tabs screen, transition directly into the child state. The only problem left now is one where I can’t seem to transition between child states, i.e. I have an href attribute in ion-tab which is a direct URL to the child s…

Sounds like maybe the “ion-nav-view” in each of your tabs doesn’t match the name of the “views” in your route states, or you’re not setting the view name in your states? For example, if your tab is something like: <ion-tab title="tab1" href="#/home/tab1"> <ion-nav-view name="content-tab1"></ion…

Yes, I think I am doing that: <ion-view title="Connect"> <ion-nav-buttons side="left"> <button side="left" menu-toggle="left" class="button button-icon icon ion-navicon"></button> </ion-nav-buttons> <ion-tabs class="tabs-top tabs-striped"> <ion-tab title="Friends" href="#/app/connect/…

I think the problem is with your route config. The “.” in your state names is kind of like inheritance, especially when it comes to paths. For example, your “Friends” route state should drop the “/connect” from your URL (since it’s “inherited” from “app.connect”) and look something like this inste…

That seems to have done the trick - the tabs work as expected. My confusion was with the different kinds of URLs, i.e. “state” URLs vs. browser URLs Thanks very much for the assist :smile:

Combining sidemenu navigation with nested tabbed interface?

ionic-v1

revie September 15, 2014, 6:29pm 11

Heh. Yea, that tripped me up too when I first ran into it. Glad I could help.

No Back Button and tranistion

Transition and not back button from "button link"

Topic		Replies	Views
Using sidemenu and tabs together ionic-v1	64	60075	May 5, 2017
Tabs, side menu & intro/login page ionic-v1	5	6965	June 26, 2014
Sidemenu & Tabs Together? ionic-v3	29	16436	July 19, 2021
Side menu, tabs and side-menu as a view no working together (a bit complex) ionic-v1	0	724	January 10, 2016
[Urgent] tab menu and side menu together in ionic ionic-v1	4	1802	October 2, 2015

Combining sidemenu navigation with nested tabbed interface?

Related topics