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.

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