Wizards

<vuestic-wizard 
     :steps="vrSteps" 
     wizard-layout="vertical" 
     wizard-type="rich">

     <div slot="page1" class="form-wizard-tab-content">
          <p>Add Page 1 content here!</p>    
     </div>
     <div slot="page2" class="form-wizard-tab-content">
          <p>Add Page 2 content here!</p>    
     </div>
     <div slot="wizardCompleted" class="form-wizard-tab-content">
          <h4>Add slot="wizardCompleted" to your wizard's last step,
           to show this step after wizard completed!</h4>
     </div>
</vuestic-wizard>

<script>
data () {
   return {
      // how your steps should look like: 
      vrSteps: [
          {
            label: 'Step 1. Name',
            slot: 'page1', // the same name as in attribute "slot" of wizard's step
            onNext: () => {
              // method is called when moving to the next step
            },
            isValid: () => {
              // condition for moving to the next step
              return true;
            }
          },
          {
            label: 'Step 2. Country',
            slot: 'page2', // the same name as in attribute "slot" of wizard's step
            onNext: () => {
              // method is called when moving to the next step
            },
            isValid: () => {
              // condition for moving to the next step
              return true;
            },
            onBack: () => {
              // method is called when moving to the previous step
            },
          }
        ]
   }
}
</script>

Props

• steps - Array - array of your steps
• wizard-layout - String ("vertical" | "horizontal", default: "horizontal") - position of your wizard relatively to container
• wizard-type - String ("rich" | "simple", default: "simple") - "rich" will enhance beauty of your wizard

References

• Validation rules: https://baianat.github.io/vee-validate/guide/rules.html

Component Examples (with validation)

<vuestic-checkbox
 name="hsCheckbox"
 required
 v-validate="'required'"
 :label="$t('forms.controls.unselected')"
 v-model="checkbox.unselected"
/>

<vuestic-radio-button
 name="hsRadio"
 required
 v-validate="'included: 1'"
 v-model="radioSelectedOption"
 label="1"
/>

<vuestic-switch
 v-model="isOk"
 name="hsSwitch"
 required
 v-validate="'required'"
>
 <span slot="trueTitle">Yes</span>
 <span slot="falseTitle">No</span>
</vuestic-switch>

Find DEMOs here!