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.

How to change tabbar's active icon?

  • this is my code

        <v-ons-toolbar class="home_toolbar">
          <div class="center">{{title}}</div>
        <v-ons-tabbar class="home_tabbar" swipeable position="auto" :tabs="tabs" :visible="true" :index.sync="activeIndex">

    this is my prop

    import Home from './home'
    import Loan from './loan'
    import User from './user'
    export default {
      computed: {
        title () {
          return this.tabs[this.activeIndex].label
      data () {
        return {
          activeIndex: 0,
          tabs: [
              icon: 'ion-home',
              activeIcon: 'ion-ios-bell',
              label: 'home',
              page: Home,
              key: 'homePage'
              icon: 'ion-ios-bell',
              activeIcon: 'ion-home',
              label: 'loan',
              page: Loan,
              key: 'loanPage'
              icon: 'ion-ios-settings',
              activeIcon: 'ion-home',
              label: 'user',
              page: User,
              key: 'userPage'

    but when the program run in the browser,the activeIcon was be translate to activeicon like this0_1509871791924_QQ20171105-164935.png
    it doesn’t work, so how to do?

  • Onsen UI

    @丶JavaScript Try { 'active-icon': 'ion-ios-bell', ... }. Maybe we should add some “hyphenate” function by default to this…

  • @Fran-Diox it’s ok. thx