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:
-
@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?
-
@jmi23 Nest an
ons-navigator
insideons-splitter-content
and call navigator methods instead of splitter’sload
. Example in the tutorial.