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.

Custom v-ons-tabbar



  • Hello,

    I want to custom tabbar.
    For example, I have three tabs(home,myprofile.setting), and the other not-tabbed-page not belong to tabs. Sometime I show the content on not-tabbed-page.

    I have a question:

    1. How to extend VOnsTabbar in my project(webpack.js).
    2. How to display the other not-tabbed page(ons-page).
      1 <template>
      2   <ons-tabbar
      3     :on-swipe.prop="onSwipe"
      4     :activeIndex="index"
      5     @postchange.self="$emit('update:index', $event.index)"
      6     v-on="unrecognizedListeners"
      7   >
      8     <div class="tabbar__content">
      9       <div><slot>Here Custom Data</slot></div>
     10       <div>
     11         <slot name="pages">
     12           <component v-for="tab in tabs" v-bind="tab.props" :is="tab.page" :key="(tab.page.key || tab.page.name || _tabKey(tab))" v-on="unrecognizedListeners"></component>
     13         </slot>
     14       </div>
     15     </div>
     16     <div class="tabbar">
     17       <slot>
     18         <v-ons-tab v-for="tab in tabs" v-bind="tab" :key="_tabKey(tab)"></v-ons-tab>
     19       </slot>
     20       <div class="tabbar__border"></div>
     21     </div>
     22   </ons-tabbar>
     23 </template>
     24
     25 <script>
     26   import { VOnsTabbar } from 'vue-onsenui';
     27   export default {
     28     extends: VOnsTabbar,
     29   };
     30 </script>
    

    I have got error messages if extending:
    0_1505975356305_스크린샷 2017-09-21 오후 3.26.42.png

    Please help me!!!
    Thank you.


  • Onsen UI

    @Hyeokjune-Jeon I don’t think import { VOnsTabbar } from 'vue-onsenui'; is exactly importing what you think. vue-onsen does not export components, only an installable plugin. You can try to get the component from Vue’s installed components: Vue.options.components['v-ons-tabbar'].