BinarCode / vue-form-wizard

Vue.js 2 wizard
https://binarcode.github.io/vue-form-wizard/#/
MIT License
1.11k stars 243 forks source link

Font icons not loading and how to override css and remove static text? #244

Open harishankards opened 6 years ago

harishankards commented 6 years ago

Hi, I am using this wizard and it's great. Thanks for that.

Below, is my code:

<template>
  <vuestic-widget>
    <form-wizard @on-complete="onComplete">
     <tab-content title="Personal details"
                  icon="ti-user"
                  :before-change="validateAsync">
       My first tab content
     </tab-content>
     <tab-content title="Additional Info"
                  icon="ti-settings">
       My second tab content
     </tab-content>
     <tab-content title="Last step"
                  icon="ti-check">
       Yuhuuu! This seems pretty damn simple
     </tab-content>
    </form-wizard>
  </vuestic-widget>
</template>

<script>
  import {FormWizard, TabContent} from 'vue-form-wizard'
  import 'vue-form-wizard/dist/vue-form-wizard.min.css'

  export default {
    name: 'postSignup',
    components: {
      FormWizard,
      TabContent
    },
    data () {
      return {
        counter: 0
      }
    },
    methods: {
      onComplete: function () {
        alert('Yay. Done!')
      },
      validateAsync: function () {
        if (this.counter === 0) {
          this.counter ++
          console.log('its false')
          return false
        } else {
          return true
        }
      }
    }
  }
</script>

and this is my output: image

I have 3 questions:

  1. The fonts are not getting fetched and I see it in the console: Fallback font will be used while loading: https://fonts.gstatic.com/s/sourcesanspro/v11/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2
  2. How do I remove the default heading and caption for the wizard? : Awesome Wizard
  3. How to override the CSS and add my own colours instead of red?
cristijora commented 6 years ago

Hello @harishankards Please read the docs/see demos This is quite basic stuff and is fully covered in demos/docs http://vuejs.creative-tim.com/vue-form-wizard/#/?id=demos

As for icons, icons is a third party package like font-awesome and are not provided by the wizard component.

harishankards commented 6 years ago

Thanks @cristijora.

Got it. Also, I'd like to know to change the colour of the icon in the tabs which are not active. How would I achieve that?