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