Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

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: