Wizard

If you have lengthy forms to complete, you can use the a Wizard. We build a simplified wizard version inspired by Vue Form Wizard. This plugin allows you to cut the form into steps and let the user complete it gradually. You can find the wizard components inside src/components/UIComponents/Wizard folder and see it's implementation.

In order to use the wizard, import the wizard

import {SimpleWizard, WizardTab} from 'src/components'

Global usage

Vue.component(SimpleWizard)
Vue.component(WizardTab)

Local usage

export default {
  components: {
    SimpleWizard,
    WizardTab
  }
}

Basic example

    <template>
<simple-wizard>
  <template slot="header">
    <h3 class="card-title">Build your profile</h3>
  </template>

  <wizard-tab>
    <template slot="label">
      <i class="now-ui-icons users_circle-08"></i>
      About
    </template>
    <div>First step content</div>
  </wizard-tab>

  <wizard-tab>
    <template slot="label" >
      <i class="now-ui-icons ui-1_settings-gear-63"></i>
      Account
    </template>
    <div>Second step content</div>
  </wizard-tab>

  <wizard-tab>
    <template slot="label">
      <i class="now-ui-icons ui-1_email-85"></i>
      Address
    </template>
        <div>Third step content</div>
  </wizard-tab>
</simple-wizard>

</template>

<script>
  export default {}
</script>

    Wizard inside modal

    <template>
<div>
<p-button type="primary" @click="showModal = true"> Show modal</p-button>
<modal v-if="showModal" :show.sync="showModal" body-classes="p-0" :show-header="false">
<simple-wizard plain :show-header="false">
  <wizard-tab>
    <template slot="label">
      <i class="now-ui-icons users_circle-08"></i>
      About
    </template>
    <div>First step content</div>
  </wizard-tab>

  <wizard-tab>
    <template slot="label" >
      <i class="now-ui-icons ui-1_settings-gear-63"></i>
      Account
    </template>
    <div>Second step content</div>
  </wizard-tab>
</simple-wizard>

</modal>
</div>
</template>

<script>
export default {
  data(){
   return {
    showModal: false
   }
  }
}
</script>

    For a complete example, please check out src/components/Dashboard/Forms/Wizard.vue component

    Wizard Props

    Wizard Slots

    NameDescription
    defaultDefault content slot
    headerSlot for header (above tabs containing title and subTitle)
    footer (scoped slot)Content for wizard footer (containing prev, next and finish buttons)

    Wizard Events

    Event NameDescriptionParameters
    tab-changetriggered whenever a transition to another tab occursoldTab and newTab objects

    Wizard Tab Props

    TIP

    Note You can use the beforeChange function on each wizard tab to trigger a validation method before navigation to the next step. beforeChange should either return a boolean or a Promise than resolves with true. Returning a falsy value or rejected promise, will fail the validation and will not go to next step. If you don't provide a beforeChange method, the wizard will always navigate to next step upon "Next" button click

    Wizard Tab Slots

    NameDescription
    defaultWizard tab default content
    labelThis will not be displayed inside the pane itself but rather in the upper navigation

    TIP

    Note Since the source code of these components is inside the template itself, feel free to modify and adjust them according to your needs. They should work for most of the use-cases but they cannot cover absolutely everything 😃

    ← Button →