Pattern form VueJs Template WebPack
-
Hello,
I need help for a specific pattern, i has download http://vuejs-templates.github.io/webpack/;
I need to keep the ons-splitter, add tabbar and navigator, all that in the homepage.
And the goal is to stack pages directly from the tabbar templates and from the ons- splitter.
So actually the code is like the example and i need something like that :
<v-ons-navigator> <v-ons-page id="app"> <v-ons-splitter> <v-ons-splitter-side swipeable collapse width="250px" :animation="$ons.platform.isAndroid() ? 'overlay' : 'reveal'" :open.sync="menuIsOpen"> <menu-page></menu-page> </v-ons-splitter-side> <v-ons-splitter-content> <v-ons-tabbar position="auto" :tabs="tabs" :index.sync="activeIndex"> <template slot="pages"> <component v-for="tab in tabs" :is="tab.page" :key="tab.page" :page-stack="pageStack"></component> </template> </v-ons-tabbar> </v-ons-splitter-content> </v-ons-splitter> </v-ons-page> </v-ons-navigator> </template> <script> import HomePage from './components/HomePage' import MenuPage from './components/MenuPage' export default { name: 'app', computed: { menuIsOpen: { get () { return this.$store.state.splitter.open }, set (newValue) { this.$store.commit('splitter/toggle', newValue) } } }, components: { HomePage, MenuPage } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> ons-splitter-side[side=left][animation=overlay] { border-right: 1px solid #BBB; } </style>
I tried everything, search with the code on the playground etc but nothing works well,
Thank you for your help,