Combining Splitter and Navigator with back button.

yeastwrangler

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.

dvlwjoffice

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:

Fran Diox

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

yeastwrangler

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

jmi23

@yeastwrangler how make the same withhout vue?

Fran Diox

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