Customizing the Navigation Tabs

[lshannon]

We are trying to convert and existing wizard to this project. So far this project is far superior in functionality to what we originally had with JQuery + Bootstrap. Great job!

However there are some small UI challenges:

• How to make the colour of the Tab change when selected to a specific colour
• How to put the text for the Nav step inside the Tab rather than below
• How to increase the height of the Tab

Is there a way to apply specific CSS elements to the Navigation Tabs? Or perhaps a custom section similar to template slot="footer" so we can fully control the creation of the Navigation Tabs?

[lshannon]

OK, some of this is solved. In regards to the Tab colours when active or not. To change the non active Tab colour I added this to the page the wizard is written into:

<style type="text/css"> .vue-form-wizard .wizard-icon-circle.tab_shape { background-color: #9A9A9A; } </style>

To set the selected colour for the tabs I added the following to my form-wizard parent element:

<form-wizard @on-complete="onComplete" title="" subtitle="" ref="wizard" shape="tab" color="#23CCEF">

[icrotz]

Check this: https://github.com/BinarCode/vue-form-wizard/pull/311 It's PR adding this feature