Monaca Onsen UI Discord Chat Github Repo

Load tabbar with splitter



  • I have a page that has both splitter and tabbar at the same time, navigating trought the tabbar is not giving problem, its showing the tabbar and the splitter just fine.
    Problem is when i want to go from the splitter to another tab, my tabbar disappear.
    This is what I mean.
    0_1516020108804_tabbar.png
    This is navigating with the tabbar, my splitter is there.

    0_1516020128935_splitter.png
    But when I go to the same page with the splitter, my tabbar is not there anymore.

    Here is my code

    <ons-navigator id="myNavigator" page="splitter.html">
    
    
      <ons-template id="splitter.html">
      <ons-splitter var="mySplitter" ng-controller="InicioCtrl as splitter">
        <ons-splitter-side side="left" width="100%" collapse swipeable>
          <ons-page>
            <ons-list>
    <a ng-click="splitter.load('tab3/tab3.html')">Mis facturas</a>
    
              //Code of the splitter
    
    </ons-list>
          </ons-page>
        </ons-splitter-side>
        <ons-splitter-content page="tabbar.html"></ons-splitter-content>
      </ons-splitter>
    </ons-template>
    
    
    <ons-template id="tabbar.html">
        <ons-tabbar swipeable position="bottom" ons-prechange="updateTitle($event)">
        <ons-tab page="tab3/tab3.html" label="Tab 3" icon="md-settings" active-icon="md-face">
       //Code of the tabbar
            </ons-tabbar>
    </ons-template>
    

    And the tab I am going with the both navigation is this.

      <ons-navigator id="myNavigator" page="tab2.html">
        </ons-navigator>
    
    
        <ons-template id="splitter.html">
      </ons-template>
    
        <ons-template id="tabbar.html">
        </ons-template>
          <ons-page>
              <ons-toolbar>
                  <div class="left">
                      <ons-toolbar-button ng-click="mySplitter.left.open()">
                          <ons-icon icon="fa-bars"></ons-icon>
                      </ons-toolbar-button>
                  </div>
                  <div class="center">
                      {{title}}
                  </div>
              </ons-toolbar>
    
              <p>Sirve la pagina 2</p>
    
      </ons-page>
    
    

    So the help I need is, to show the tabbar when i go to the page with the splitter.
    Thanks


  • Onsen UI

    @GreyBlade Copy-pasting from Gitter:

    If you use splitter.load you are changing all the content inside the splitter, thus losing your tabbar (which is a child of the splitter I assume). What you need to do is to change the tabbar content instead. Therefore, call tabbar.setActiveTab(…) instead of splitter.load

    :+1: