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.