CODEWITHSUNDEEP
javascriptvue.js
deeej
deeej

Reputation: 387

Hide top bar in vue-form-wizard

I need to hide the vue-form-wizard top bar that indicates what step someone is on.

Is there a simple prop to use? I can't seem to find one in the documentation.

enter image description here

<form-wizard @on-complete="onComplete" 
                  shape="square"
                  color="#3498db">
        <tab-content title="Personal details"
                     icon="ti-user">
          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>

Vue.use(VueFormWizard)
new Vue({
 el: '#app',
 methods: {
  onComplete: function(){
      alert('Yay. Done!');
   }
  }
})

https://jsfiddle.net/bt5dhqtf/98/

Upvotes: 0

Views: 915

Answers (1)

koko-js478
koko-js478

Reputation: 2011

.wizard-progress-with-circle {
  display: none;
}
.wizard-nav.wizard-nav-pills {
  display: none;
}

You should add this style to css file.

Upvotes: 1

Related Questions