# Stepper

### Installation

__import stepper as a component__
```js
import { Stepper } from './js-modules';
...
components: { Stepper }
...
```

__import Tailwind CSS__
```js
var modules = require('./assets/js/js-modules/tailwind/index.js');
...
plugins: [
    modules.stepper({})
]
...
```
### Example
```html
<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 '<template slot="Ihre Tarifwahl">')  
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.