Onsen UI Pagination: navigator and tabbar

Question

I am in doubt about mixing navigator and tabbar.

Explaining: the main page (Main page1) consists of two child pages (tab1 and tab2) that are accessed by tabbar, whil

Answer 1

Since there is no specific question I will try to clarify about the navigation patterns you are using there.

<!-- Navigator as root element -->
<ons-navigator>
    <ons-page>
        <ons-tabbar>
            <ons-tab>...</ons-tab>
            <ons-tab>...</ons-tab>
        </ons-tabbar>
    </ons-page>
</ons-navigator>

You have an ons-navigator as the root of your app and then you have an ons-tabbar as a child. This means that when you try to navigate using the parent navigator, you will push another child (a page) over the current child (the tabbar), so you won't see the tabbar anymore (not even the toolbar unless you put a new one in every page) until you push it again or delete all its siblings over it. Also, all your pages will be stored in the same page-stack since you only have one navigator. This means that you cannot separate Tab1 and Tab2 workflows in two different branches: if you resetToPage in Tab1, Tab2 will be also reset.

This is completely fine if you are aware of it and is what you really want to do. It depends on what you need.

<!-- Tab Bar as root element -->
<ons-tabbar>
    <ons-tab>
        <ons-navigator>...</ons-navigator>
    </ons-tab>
    <ons-tab>
        <ons-navigator>...</ons-navigator>
    </ons-tab>
</ons-tabbar>

Another different approach, and perhaps more common, is to have the ons-tabbaras the root of the project and define one ons-navigator as a child of every ons-tab where you need further navigation. Like this your tabbar will always be visible since what you are changing with the navigators is not all the content but just the content of a specific ons-tab. Every tab will have its own workflow stored in a different page-stack, totally independent from the others.

As I said before, it really depends on what you need for you app. You could have, for example, many tabs for things like "settings", "about", etc. that are just one-page views and then a navigator in only one tab with the real app.

Let me know if your doubts are clarified now!