Monaca Onsen UI Discord Chat Github Repo

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,