3. Pattern form VueJs Template WebPack

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.

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,

    0