js-modules/stepper

Stepper

Installation

import stepper as a component

import { Stepper } from './js-modules';
...
components: { Stepper }
...

import Tailwind CSS

var modules = require('./assets/js/js-modules/tailwind/index.js');
...
plugins: [
    modules.stepper({})
]
...

Example

<stepper v-model="currentStep" :steps="steps" active-color="primary">
    <template slot="Ihre Tarifwahl" slot-scope="{next}">
        Inhalt
    </template>
</stepper>

Component Params

active-color:
Changes the background color and the label color of the active step as well as the lines before that. This can be any tailwind-color defined in tailwind.js.

v-model:
Integer that holds the index of the current active slide (starts with 0)

steps:
Collection with following params:

• label: The label for the step
• icon: a font-awesome-icon reference for the step

Example:

var s = [
    {label: 'Ihre Tarifwahl', icon: 'money'},
    {label: 'Prüfen & Absenden', icon: 'check'}
];

Each Step should have a reference to a template tag inside the component's default slot (see example '')
As a slot scope you can define next and prev. These two methods can be executed to go to the next or the prev step.