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.

Combining Splitter and Navigator with back button.



  • Is it possible to combine splitter and navigator with a back button? I based my code on the “Combining Splitter and Navigator” example and added a v-ons-back-button but it only works with the “Navigator” pages and not the pages clicked in the side menu.



  • Yes, its works.

    You must arrange it like this :

    • Splitter
    • As much as template you want

    then in the template you can make it like this :

    • template
    • ons-navigator
    • ons-page

    and it will be something like this

    /*one splitter for all*/
    <ons-splitter>
     <ons-splitter-side>
      <ons-page>
        /*anything here*/
      </ons-page>
     </ons-splitter-side>
    </ons-splitter>
    
    /*any page format*/
    <template>
      <ons-navigator>
       <ons-page>
        /*anything here*/
       </onspage>
      </ons-navigator>
    </template>
    

    try it ! its work for me :smiley:


  • Onsen UI

    @yeastwrangler The back button is just popping 1 page from its parent navigator’s page stack. The splitter should be modifying the same page stack.



  • @Fran-Diox That was it! Thank you!

    I was using two separate stacks, when I changed the splitter to use the same stack as the navigator it works.

     <v-ons-splitter-side swipeable width="220px" collapse="" side="right" :open.sync="openSide">
          <v-ons-page>
            <v-ons-list>
              <v-ons-list-item
                v-for="menuPage in menuPages"
                :key="menuPage.label"
                tappable
                modifier="chevron"
                @click="setOptions({animation: 'fade'}); pageStack.push(menuPage.page); openSide = false"
                >
                {{ menuPage.label }}
              </v-ons-list-item>
            </v-ons-list>
          </v-ons-page>
        </v-ons-splitter-side>
    


  • @yeastwrangler how make the same withhout vue?


  • Onsen UI

    @jmi23 Nest an ons-navigator inside ons-splitter-content and call navigator methods instead of splitter’s load. Example in the tutorial.