@feinzer/v-stepper

Simple, reusable and highly customizable stepper component using VueJS Slots.

Installation

npm install @feinzer/v-stepper

or

yarn add @feinzer/v-stepper

Usage

import { Stepper, Step } from '@feinzer/v-stepper';

export default {
  ...
  components: {
    Stepper,
    Step,
  },
  ...
};

<Stepper>
  <Step>
    Step 1 Content
  </Step>
  <Step>
    Step 2 Content
  </Step>
</Stepper>

Props

Stepper

| Property | Type | Default | Description | |:----------------------------|:--------|:--------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | showIndicator | Boolean | false | Shows an indicator section on top of the steps. | canFinish | Boolean | true | Enables or disables the finish button and marks the steps as finished.

Step

| Property | Type | Default | Description | |:----------------------------|:--------|:--------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | canAdvance | Boolean | true | Checks per step to allow the user to go next or not.