54 lines
1.3 KiB
Markdown
54 lines
1.3 KiB
Markdown
# 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.
|