Monaca Onsen UI Discord Chat Github Repo

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


  • Onsen UI

    @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