Problem with ion-tab and ion-side-menu on the same page

ionic-v1
1

Hi, I have a main page with tabs working fine:

<ion-tabs class="tabs-stable" ng-class="{'tabs-positive': platform == 'android', 'tabs-icon-top': platform != 'android'}">

      <ion-tab title="Trucks" icon-off="baldeo" icon-on="baldeoON" href="#/tab/darsenas">
        <ion-nav-view name="tab-darsenas"></ion-nav-view>
      </ion-tab>

      <ion-tab title="Tanks" icon-off="manguera" icon-on="mangueraON" href="#/tab/baldeos">
        <ion-nav-view name="tab-baldeos"></ion-nav-view>
      </ion-tab>

      <ion-tab title="Map Tanks" icon-off="map" icon-on="mapON" href="#/tab/mapa">
        <ion-nav-view name="tab-mapa"></ion-nav-view>
      </ion-tab>

</ion-tabs>

Now I have to integrate a side menu in this page but the side menu doesn´t fit well without removing ion-tabs. The side menu is “inside” the ion-tabs.

<ion-side-menus>
  <!-- Left menu -->
  <ion-side-menu side="left">
    <header class="bar bar-header bar-stable">
  <h1 class="title">Left</h1>
</header>
<ion-content class="has-header">
  <ion-list>
    <ion-item menu-close>
      Help
    </ion-item>
    <ion-item menu-close>
      Incidence
    </ion-item>
    <ion-item menu-close>
      Contact
    </ion-item>
  </ion-list>
</ion-content>
  </ion-side-menu>

  <ion-side-menu-content>
    <!-- Main content, usually <ion-nav-view> -->
    <ion-tabs class="tabs-stable" ng-class="{'tabs-positive': platform == 'android', 'tabs-icon-top': platform != 'android'}">

       <ion-tab title="Trucks" icon-off="baldeo" icon-on="baldeoON" href="#/tab/darsenas">
    <ion-nav-view name="tab-darsenas"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Tanks" icon-off="manguera" icon-on="mangueraON" href="#/tab/baldeos">
    <ion-nav-view name="tab-baldeos"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Map Tanks" icon-off="map" icon-on="mapON" href="#/tab/mapa">
    <ion-nav-view name="tab-mapa"></ion-nav-view>
  </ion-tab>
    </ion-tabs>

  </ion-side-menu-content>
</ion-side-menus>

Is it possible to have a ion-tab and ion-side-menu on the same page? I would like that the side menu looks like:
http://ionicframework.com/docs/api/directive/ionSideMenus/

Kind Regards

2

Hello,

I think this is what you are looking for :

1 Like