How to change tabbar's active icon?



  • this is my code

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

    this is my prop

    <script>
    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'
            }
          ]
        }
      }
    }
    </script>
    

    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


Log in to reply