Package Exports

vue-good-wizard

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-good-wizard) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue-good-wizard

An easy and clean VueJS 2.x wizard plugin

Basic Screenshot

Getting Started

Prerequisites

The plugin is meant to be used with existing VueJS 2.x projects.

Installing

Install with npm:

npm install --save vue-good-wizard

import into project:

import Vue from 'vue';
import VueGoodTable from 'vue-good-wizard';

Vue.use(VueGoodWizard);

Example Usage

<template>
  <div>
    <vue-good-wizard 
      :steps="steps"
      :onNext="nextClicked" 
      :onBack="backClicked">
      <div slot="page1">
        <h4>Step 1</h4>
        <p>This is step 1</p>
      </div>
      <div slot="page2">
        <h4>Step 2</h4>
        <p>This is step 2</p>
      </div>
      <div slot="page3">
        <h4>Step 3</h4>
        <p>This is step 3</p>
      </div>
      <div slot="page4">
        <h4>Step 4</h4>
        <p>This is step 4</p>
      </div>
    </vue-good-wizard>
  </div>
</template>

<script>
export default {
  name: 'demo',
  data(){
    return {
      steps: [
        {
          label: 'Select Items',
          slot: 'page1',
        },
        {
          label: 'Add Constraints',
          slot: 'page2',
        },
        {
          label: 'Review',
          slot: 'page3',
        },
        {
          label: 'Apply',
          slot: 'page4',
        }
      ],
    };
  },
  methods: {
    nextClicked(currentPage) {
      console.log('next clicked', currentPage)
      return true; //return false if you want to prevent moving to next page
    },
    backClicked(currentPage) {
      console.log('back clicked', currentPage);
      return true; //return false if you want to prevent moving to previous page
    }
  },
};
</script>

This should result in the screenshot seen above

Component Options

Option	Description	Type, Example
steps (required)	Array of objects that specify step titles and page id	[ { label: 'Add Constraints', // title for wizard step page: 'page2', //id for div to show for this step }, //... ]
onNext (optional)	function called before next page is shown. This is a good place to do validation etc. Return true to proceed, or false to stay on the same page.	function ex: function(currentPage){ console.log(currentPage); return true; }
onBack (optional)	function called before previous page is shown. Return true to proceed, or false to stay on the same page.	function ex: function(currentPage){ console.log(currentPage); return true; }

Authors

Akshay Anand - Initial work - xaksis

License

This project is licensed under the MIT License - see the LICENSE.md file for details