Tabs not working
-
im very new to onsen ui, iam trying to add tabs to my page, the template i used is here vue init OnsenUI/vue-cordova-webpack hello-world
i want to add tabs to HomePage component.
so my HomePage look like below<template> <v-ons-page> <v-ons-toolbar class="home-toolbar"> <div class="left"> <v-ons-toolbar-button @click="$emit('toggleMenu')"> <v-ons-icon icon="ion-navicon, material:md-menu"></v-ons-icon> </v-ons-toolbar-button> </div> <div class="center">{{ msg }}</div> </v-ons-toolbar> <div class="header"> <img src="../assets/logo.png"> </div> <v-ons-list-title>Vue.js Essential Links</v-ons-list-title> <v-ons-list> <v-ons-list-item v-for="item in essentialLinks" @click="goTo(item.link)" :key="item.link"> <div class="left"> <v-ons-icon fixed-width :icon="item.icon"></v-ons-icon> </div> <div class="center">{{ item.label }}</div> <div class="right"> <v-ons-icon icon="fa-external-link"></v-ons-icon> </div> </v-ons-list-item> </v-ons-list> <v-ons-list-title>Vue.js Ecosystem</v-ons-list-title> <v-ons-row> <v-ons-col> <v-ons-card @click="goTo('http://router.vuejs.org/')">vue-router</v-ons-card> </v-ons-col> <v-ons-col> <v-ons-card @click="goTo('http://vuex.vuejs.org/')">vuex</v-ons-card> </v-ons-col> </v-ons-row> <v-ons-row> <v-ons-col> <v-ons-card @click="goTo('http://vue-loader.vuejs.org/')">vue-loader</v-ons-card> </v-ons-col> <v-ons-col> <v-ons-card @click="goTo('https://github.com/vuejs/awesome-vue')">awesome-vue</v-ons-card> </v-ons-col> </v-ons-row> <v-ons-tabbar position="auto" swipeable :modifier="md ? 'autogrow white-content' : null" :on-swipe="md ? onSwipe : null" :tabbar-style="swipeTheme" :tabs="tabs" :index.sync="index" @postchange="showTip($event, 'Tip: Try swiping pages!')"></v-ons-tabbar> </v-ons-page> </template> <script> import homePage from './TabHome'; export default { name: 'home', data() { return { msg: 'Welcome', tabs: [ { label: this.md ? null : 'Camera', icon: 'ion-camera, material:md-camera', page: homePage, theme: red, style: this.md ? { maxWidth: '60px' } : {}, top: -105, // Toolbar + Tabbar heights }, { icon: this.md() ? null : 'ion-ios-bell', label: 'News', page: homePage, badge: 7, key: 'newsPage', }, // { // icon: this.md() ? null : 'ion-ios-settings', // label: 'Settings', // page: settingsPage, // key: "settingsPage" // } ], }; }, methods: { goTo(url) { window.open(url, '_blank'); }, }, }; </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> .header { text-align: center; } img { max-width: 300px; } ons-list-title { text-transform: none; } ons-list-title:not(:first-of-type) { margin-top: 30px; } ons-card { text-align: center; } ons-list-item, ons-card { cursor: pointer; } </style>
and a Tab page imported
<template> <v-ons-page> <p style="text-align: center"> Welcome home.<br><br>{{ myProp }} </p> </v-ons-page> </template> <script> export default { name: 'home', props: ['myProp'], data() {}, }; </script>
but im not seeing the tabs title and content, i dont wht went wrong, can some one help me to fix this >?? thanks in advance
-
@rashnk Welcome! There is already a tutorial about
v-ons-tabbar
. Have you checked it out? http://tutorial.onsen.io/?framework=vue&category=reference&module=tabbar