Monaca Onsen UI Discord Chat Github Repo

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