Monaca Onsen UI Discord Chat Github Repo

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*/
        /*anything here*/
    /*any page format*/
        /*anything here*/

    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-for="menuPage in menuPages"
                @click="setOptions({animation: 'fade'}); pageStack.push(; openSide = false"
                {{ menuPage.label }}

  • @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.