Page with tabs after main menu

@stevensotram wrote:

Hello Ionic community.
I began recently to use Ionic (version 1 for the moment) and I'm sure I didn't understood well tabs logic and I need your help.

I'm building an app with a main menu.
This main menu display several buttons. One of them give access to a page where the content is filtered through three tabs. (see the graphic)

Pasted image554x622 16.3 KB

My problems :
The content is loaded but not immediately
The back button is not always visible and I can't exit to this page

Extract of the content of route.js

.state('page02', {
url: '/page02',
templateUrl: 'templates/page02.html',
controller: 'page02Ctrl'
})

.state('mainparty', {
url: '/mainparty',
abstract: true,
templateUrl: 'templates/mainparty.html',
controller: 'mainpartyCtrl'
})

  .state('mainparty.party-tc', {
      url: "/party-tc",
      views: {
          'party-tc': {
              templateUrl: "templates/party-tc.html",
              controller: 'party-tcCtrl'
          }
      }
  })
  .state('mainparty.party-wa', {
      url: "/party-wa",
      views: {
          'party-wa': {
              templateUrl: "templates/party-wa.html",
              controller: 'party-waCtrl'
          }
      }
  })
  .state('mainparty.party-pm', {
      url: "/party-pm",
      views: {
          'party-pm': {
              templateUrl: "templates/party-pm.html",
              controller: 'party-pmCtrl'
          }
      }
  });

Main page, to give access to other pages

<ion-view title="APP NAME" id="mainpage" class="" hide-nav-bar="true">
        <ion-header-bar class="bar bar-header bar-assertive">
            <h1 class="title">APP NAME</h1>
        </ion-header-bar>

        <ion-content scroll="false" class="center" overflow-scroll="false" >

                 <div class="padding">
                     <button ui-sref="page01" id="" class="button button-block button-positive button-royal">page 01</button>
                     <button ui-sref="page02" id="" class="button button-block button-positive button-assertive">page 02</button>
                     <button ui-sref="page03" id="" class="button button-block button-positive button-energized">page 03</button>
                     <button ui-sref="page04" id="" class="button button-block button-positive button-balanced">page 04</button>
                  </div>

    </ion-content>
    </ion-view>

Content of page02

   <ion-view title="PAGE 02" id="" class="" >
        <ion-nav-bar class="bar-assertive">
            <ion-nav-back-button class="button icon ion-arrow-left-c">
            </ion-nav-back-button>
        </ion-nav-bar>

        <ion-tabs class="tabs-striped tabs-icon-top tabs-color-assertive">
            <ion-tab title="To answer" icon-on="ion-android-funnel" icon-off="ion-android-funnel" ui-sref="mainparty.party-wa">
                <ion-nav-view name="party-wa"></ion-nav-view>
            </ion-tab>

            <ion-tab title="To come" icon-on="ion-android-funnel" icon-off="ion-android-funnel" ui-sref="mainparty.party-tc">
                <ion-nav-view name="party-tc"></ion-nav-view>
            </ion-tab>

            <ion-tab title="Passed" icon-on="ion-android-funnel" icon-off="ion-android-funnel" ui-sref="mainparty.party-pm">
                <ion-nav-view name="party-pm"></ion-nav-view>
            </ion-tab>

        </ion-tabs>

</ion-view>

Content of the tab container - mainparty (the same as page02 in fact

    <ion-view title="PAGE 02" id="" class="" >
            <ion-nav-bar class="bar-assertive">
                <ion-nav-back-button class="button icon ion-arrow-left-c">
                </ion-nav-back-button>
            </ion-nav-bar>

            <ion-tabs class="tabs-striped tabs-icon-top tabs-color-assertive">
                <ion-tab title="To answer" icon-on="ion-android-funnel" icon-off="ion-android-funnel" ui-sref="mainparty.party-wa">
                    <ion-nav-view name="party-wa"></ion-nav-view>
                </ion-tab>

                <ion-tab title="To come" icon-on="ion-android-funnel" icon-off="ion-android-funnel" ui-sref="mainparty.party-tc">
                    <ion-nav-view name="party-tc"></ion-nav-view>
                </ion-tab>

                <ion-tab title="Passed" icon-on="ion-android-funnel" icon-off="ion-android-funnel" ui-sref="mainparty.party-pm">
                    <ion-nav-view name="party-pm"></ion-nav-view>
                </ion-tab>

            </ion-tabs>

    </ion-view>

So it's working partially and because a lot of examples I've seen on Internet are tabs oriented apps, the call of a "tabbed content" from another page is not clear for me and of course not satisfied of my work.

Thanks in advance for your help, I think any comment will be helpful.

Steven

Posts: 2

Participants: 2

Read full topic