How to add one tabs into tabs?

ionic-v1
1

it allway come back to main tabs when i click child tabs.
my test demo


please how to fix?

3

Hi, reason is simple I think:

In your tab “sub-tab” when you have a button “tab view” which tries to link to “facts” (tab.facts).
But in your tabs definition there is no “facts” tab, only home/sub-tab/contact.

So, just a typo in your code?

4

It canbe load when I add “href=”#" in child tab item
You can look demo again.

and chaged tabs.contact. it child tabs canbe load.

5

Okay, but then “facts” should not be a child state of “tabs”. The state shouldn’t be “tabs.facts”, that will not work. It should just be state “facts”, in your UI Router definition.

6

Could you help me to write an example?

7

When I remove tabs.facts.<tabs…> he can be normal. And have the back button.
If I define “facts” in ui router, click the tab.sub_tab button, no back button.

8

I saw that the “facts” page is again a tabbed page with 3 tabs. But the states and so on for these aren’t defined yet in your code. But I made a version of your pen which works if I make the “facts” page a simple page, without tabs. I think you can add the tabs for ‘facts’ yourself. Here it is:

Now if you compare your version with mine you will see that:

  • I changed the state from “tabs.facts” to “facts”, and
  • I didn’t use “sub-tab” as the view for “facts” because it’s a new top level view really (especially if you want to add tabs to the facts page)

I believe what you try to achieve “sub tabs” i.e. tabs within tabs but I think that’s not really a good idea from UI/UX point of view anyway. Way too complicated for the user.

9

I just want to solve this situation.
Your demo the “tabs.contact” child tabs can be click.
“tabs.facts” why not be load.How to load.

10

In my demo pen you can now click that button and it loads the “facts” page, doesn’t it?

Yes, the “facts” page has no tabs yet, but you can add those. What’s the problem then?

But yeah I know this whole UI Router stuff with nested views and abstract states and all that is complicated in the beginning. Or not just in the beginning, it’s still complicated, sometimes I just need to mess around a bit and then it works but I still can’t say that I “get” it 100%. Suppose I just need to invest some time to “RTFM”.

11

I saw your example. I know how you do it now. Now I want to achieve the following also show “tabs bottom main”, also have “tabs top child”. Just like your example “tabs.contacts”. Just in the middle of the tabs".

12

You mean you want tabs at the top and tabs at the bottom?

13

Yes ,
one main tabs,and one child tabs,

All pages show main tabs bottom.

like:
main tabs:{ home,sub_tabs,contacts}
-------------->
page:
sub_tabs{
“one button”–> jmp to facts page
main tabs bottom
}
-------------->
facts page：
{
child tabs top
main tabs bottom(***)
}
( He also shows the main tabs bottom.)

14

Complicated interface, never seen it done like that. Do you really think it’s a good UI ?

15

I just want to achieve it , though this UI is not welcome.

16

Sure, I can understand that you just want to figure out how it can be achieved. You can always learn something from stuff like this.

17

I read the original can be achieved, so I think with ionic how to achieve, but ionic in the last step always revert to a “main tabs”.