Multi-step

Description

<wui-multi-step> is simple component that is used in multi-step process, it shows the users where they are, what has already been done and what still needs to be done.

<wui-multi-step :steps="steps" v-model="currentStep" />

Steps data

To display steps developers need to pass property steps. It is array of step objects that needs to have specific structure. icon is Font Awesome icon name see Icon page. label and content are optional and it's used to display label above the line connecting two steps and simple content centered below icon. completed, disabled and busy are self-explanatory and used to display step state. to and href properties can be used to open link on step bubble icon or label click.

<wui-multi-step :steps="steps" v-model="currentStep" />

<script>
  export default {
    data() {
      return {
        steps: [
          {
            icon: "user-hair-buns",
            label: "",
            content: "",
            completed: false,
            disabled: false,
            busy: false,
          },
          {
            icon: "starship-freighter",
            label: "",
            content: "",
            completed: false,
            disabled: true,
            busy: false,
          },
          {
            icon: "space-station-moon-construction",
            label: "",
            content: "",
            completed: false,
            disabled: true,
            busy: false,
          },
          {
            icon: "explosion",
            label: "",
            content: "",
            completed: false,
            disabled: true,
            busy: false,
          },
        ],
        currentStep: 1,
      };
    },
  };
</script>

v-model binding

If you bind a variable to the v-model prop, value will be the current step. Step progress is controlled by developers, based on above mentioned steps object data.

<wui-multi-step :steps="steps" v-model="computedStep" />

<script>
  export default {
    data() {
      return {
        steps: [
          {
            icon: "user-hair-buns",
            label: "",
            content: "",
            completed: false,
            disabled: false,
            busy: false,
          },
          {
            icon: "starship-freighter",
            label: "",
            content: "",
            completed: false,
            disabled: true,
            busy: false,
          },
          {
            icon: "space-station-moon-construction",
            label: "",
            content: "",
            completed: false,
            disabled: true,
            busy: false,
          },
          {
            icon: "explosion",
            label: "",
            content: "",
            completed: false,
            disabled: true,
            busy: false,
          },
        ],
        currentStep: 1,
      };
    },
    computed: {
      computedStep: {
        get() {
          return this.currentStep;
        },
        set(step) {
          const stepIndex = step - 1;

          const clickedStep = this.steps[stepIndex];
          const currentStep = this.steps[this.currentStep - 1];

          // If step value i.e. label is required to complete current step before progressing to next step
          if (currentStep.label) {
            currentStep.completed = true;
          }

          if (!clickedStep.disabled) {
            this.currentStep = step;
          }
        },
      },
    },
  };
</script>

Component reference

<wui-multi-step>

• <wui-multi-step> Properties
• <wui-multi-step> v-model
• <wui-multi-step> Events
• <wui-multi-step> Slots

Properties

v-model

Events

Slots

<wui-multi-step-item>

• <wui-multi-step-item> Properties
• <wui-multi-step-item> Slots

Properties

Slots

<wui-multi-step-item-icon>

• <wui-multi-step-item-icon> Properties
• <wui-multi-step-item-icon> Slots

Properties

Slots

<wui-multi-step-item-label>

• <wui-multi-step-item-label> Properties
• <wui-multi-step-item-label> Slots

Properties

Slots

<wui-multi-step-item-content>

• <wui-multi-step-item-content> Properties
• <wui-multi-step-item-content> Slots

Properties

Slots

Importing individual components

You can import individual components into your project via the following named exports:

Example

import { WuiMultiStep } from "@wui/wui-vue/lib/multi-step";
Vue.component("wui-multi-step", WuiMultiStep);

Importing as a Vue.js plugin

This plugin includes all of the above listed individual components. Plugins also include any component aliases.

Example

import { MultiStepPlugin } from "@wui/wui-vue/lib/multi-step";
Vue.use(MultiStepPlugin);