Steps

Steps guide users through the completion of a task.

Usage

Use the steps prop to define an object array for your steps, and build your step template with the slot scope. Use v-model to keep track of which step is active. v-model must be contained in steps array

<template>
  <div>
    <ci-button @click="currentStep = steps[(steps.indexOf(currentStep) + 1) % steps.length]">
      Programmatic change
    </ci-button>
    <ci-steps
      v-model="currentStep"
      :steps="steps"
    >
      <template #step="{ step }">
        {{ step.title }}
      </template>
    </ci-steps>
  </div>
</template>

<script>
export default {
  data() {
    const steps = [
      { title: 'Step One', pxClass: "Steps,CustomPX,Step" },
      { title: 'Step Two' },
      { title: 'Step Three' },
      { title: 'Step Four' }
    ]
    return {
      currentStep: steps[2],
      steps: steps
    }
  }
}
</script>

Clickable steps

Use the clickable-steps prop to allow navigating to any step by clicking. By default, only completed steps can be clicked.

<template>
  <ci-steps
    v-model="currentStep"
    :steps="steps"
    clickable-steps
  >
    <template #step="{ step }">
       {{ step.title }}
    </template>
  </ci-steps>
</template>

<script>
export default {
  data() {
    const steps = [
      { title: 'Step One' },
      { title: 'Step Two' },
      { title: 'Step Three' },
      { title: 'Step Four' }
    ]
    return {
      currentStep: steps[1],
      steps: steps
    }
  }
}
</script>