Vue Bootstrap Stepper
Vue Stepper - Bootstrap 4 & Material Design
Vue Bootstrap stepper is a component that displays content as a process with defined by user milestones. Following steps are separated and connected by buttons.
This is a great solution for a variety of registration forms, where you don't want to scare the user with loads of fields and questions.
Stepper can be aligned vertically as well as horizontally.
Examples of Vue Bootstrap steps use:
- Registration form
- Payment gateway
- Tutorial with steps
See the following Bootstrap Vue stepper examples:
Registration form with steps MDB Pro component
The step indicator is generated by the component, basing on the name
and icon
props passed in with individual steps. Additionally, the stepper accepts following props:
buttons
- Boolean - controls whether to generate navigational buttons below;vertical
- Boolean - whether the generated stepper should be oriented vertically;within
- Boolean - decides if the generated stepper should be in it's smaller, less dominant form;simpleH
/simpleV
- Boolean - turns stepper into a purely representational component open for custom logic. Last character decides its orientation;nextBtn
- String - what should be written on the navigational button turning panes forward. Default value: "next"; the generated stepper should be oriented vertically;prevBtn
- String - what should be written on the navigational button turning panes bachwards. Default value: "previous";submitBtn
- String - what should be written on the button at the last pane. Default value: "submit";submitFunction
- Function - the callback for form submission;
To have it work properly, one must pass slot="content"
attrubute to the steps , so our content lays
where it is supposed to within the stepper.
<template>
<mdb-stepper buttons>
<mdb-step name="Basic Information"
:far="true"
icon="folder-open"
slot="content">
<h3 class="font-weight-bold pl-0 my-4"><strong>Basic Information</strong></h3>
<mdb-input label="Email"/>
<mdb-input label="Username"/>
<mdb-input label="Password"/>
<mdb-input label="Repeat Password"/>
</mdb-step>
<mdb-step name="Personal Data"
icon="pencil-alt"
slot="content">
<h3 class="font-weight-bold pl-0 my-4"><strong>Personal Data</strong></h3>
<mdb-input label="First Name"/>
<mdb-input label="Second Name"/>
<mdb-input label="Surname"/>
<mdb-textarea label="Address"/>
</mdb-step>
<mdb-step name="Terms and Conditions"
:far="true"
icon="image"
slot="content">
<h3 class="font-weight-bold pl-0 my-4"><strong>Terms and conditions</strong></h3>
<mdb-input type="checkbox" id="checkbox1" label="I agree to the terms and conditions" />
<mdb-input type="checkbox" id="checkbox2" label="I want to receive newsletter" />
</mdb-step>
<mdb-step name="Finish"
icon="check"
slot="content">
<h3 class="font-weight-bold pl-0 my-4"><strong>Finish</strong></h3>
<h2 class="text-center font-weight-bold my-4">Registration completed!</h2>
</mdb-step>
</mdb-stepper>
</template>
<script>
import { mdbStepper, mdbStep, mdbInput } from 'mdbvue';
export default {
name: 'BadgePage',
components: {
mdbStepper,
mdbStep,
mdbInput
}
}
</script>
Vertical registration form steps MDB Pro component
<template>
<mdb-stepper vertical buttons>
<mdb-step name="Basic Information"
:far="true"
icon="folder-open"
slot="content">
<h3 class="font-weight-bold pl-0 my-4"><strong>Basic Information</strong></h3>
<mdb-input label="Email"/>
<mdb-input label="Username"/>
<mdb-input label="Password"/>
<mdb-input label="Repeat Password"/>
</mdb-step>
<mdb-step name="Personal Data"
icon="pencil-alt"
slot="content">
<h3 class="font-weight-bold pl-0 my-4"><strong>Personal Data</strong></h3>
<mdb-input label="First Name"/>
<mdb-input label="Second Name"/>
<mdb-input label="Surname"/>
<mdb-textarea label="Address"/>
</mdb-step>
<mdb-step name="Terms and Conditions"
:far="true"
icon="heart"
slot="content">
<h3 class="font-weight-bold pl-0 my-4"><strong>Terms and conditions</strong></h3>
<mdb-input type="checkbox" id="checkbox1" label="I agree to the terms and conditions" />
<mdb-input type="checkbox" id="checkbox2" label="I want to receive newsletter" />
</mdb-step>
<mdb-step name="Finish"
icon="check"
slot="content">
<h3 class="font-weight-bold pl-0 my-4"><strong>Finish</strong></h3>
<h2 class="text-center font-weight-bold my-4">Registration completed!</h2>
</mdb-step>
</mdb-stepper>
</template>
<script>
import { mdbStepper, mdbStep, mdbInput, mdbTextarea } from 'mdbvue';
export default {
name: 'BadgePage',
components: {
mdbStepper,
mdbStep,
mdbInput,
mdbtextarea
}
}
</script>
Steps within form MDB Pro component
<template>
<mdb-card>
<mdb-card-body>
<h2 class="text-center font-weight-bold pt-4 pb-5"><strong>Steps form example</strong></h2>
<mdb-stepper within buttons>
<mdb-step name="Step 1" slot="content">
<h3 class="font-weight-bold pl-0 my-4"><strong>Step 1</strong></h3>
<mdb-input label="First Name"/>
<mdb-input label="Second Name"/>
<mdb-textarea label="Address"/>
</mdb-step>
<mdb-step name="Step 2" slot="content">
<h3 class="font-weight-bold pl-0 my-4"><strong>Step 2</strong></h3>
<mdb-input label="Company Name"/>
<mdb-input label="Company Addresws"/>
<mdb-textarea label="Address"/>
</mdb-step>
<mdb-step name="Step 3" slot="content">
<h3 class="font-weight-bold pl-0 my-4"><strong>Step 3</strong></h3>
</mdb-step>
</mdb-stepper>
</mdb-card-body>
</mdb-card>
</template>
<script>
import { mdbStepper, mdbStep, mdbInput, mdbCard, mdbCardBody } from 'mdbvue';
export default {
name: 'BadgePage',
components: {
mdbStepper,
mdbStep,
mdbInput,
mdbCard,
mdbCardBody
}
}
</script>
Horizontal steppers MDB Pro component
This form of the stepper is a simple ul
-based wrapper, open for custom
interactions to be designed. Below is a suggested take on the implementation.
<template>
<mdb-stepper simpleH>
<li class="completed" slot="simple">
<a href="#!">
<span class="circle">1</span>
<span class="label">First step</span>
</a>
</li>
<li class="active" slot="simple">
<a href="#!">
<span class="circle">2</span>
<span class="label">Second step</span>
</a>
</li>
<li class="warning" slot="simple">
<a href="#!">
<span class="circle"><i class="fas fa-exclamation"></i></span>
<span class="label">Third step</span>
</a>
</li>
</mdb-stepper>
</template>
<script>
import { mdbStepper } from 'mdbvue';
export default {
name: 'BadgePage',
components: {
mdbStepper
}
}
</script>
Vertical steppers MDB Pro component
- 1 First step
-
2
Second step
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse cupiditate voluptate facere iusto quaerat vitae excepturi, accusantium ut aliquam repellat atque nesciunt nostrum similique. Inventore nostrum ut, nobis porro sapiente.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore error excepturi veniam nemo repellendus, distinctio soluta vitae at sit saepe. Optio eaque quia excepturi adipisci pariatur totam, atque odit fugiat.
Deserunt voluptatem illum quae nisi soluta eum perferendis nesciunt asperiores tempore saepe reiciendis, vero quod a dolor corporis natus qui magni quas fuga rem excepturi laboriosam. Quisquam expedita ab fugiat.
- Third step
- 4 Fourth step
<template>
<mdb-stepper simpleV>
<li class="completed" slot="simple">
<a>
<span class="circle">1</span>
<span class="label">First step</span>
</a>
</li>
<li class="active" slot="simple">
<a>
<span class="circle">2</span>
<span class="label">Second step</span>
</a>
<div class="step-content grey lighten-3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse cupiditate voluptate facere iusto quaerat vitae excepturi, accusantium ut aliquam repellat atque nesciunt nostrum similique. Inventore nostrum ut, nobis porro sapiente.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore error excepturi veniam nemo repellendus, distinctio soluta vitae at sit saepe. Optio eaque quia excepturi adipisci pariatur totam, atque odit fugiat.</p>
<p>Deserunt voluptatem illum quae nisi soluta eum perferendis nesciunt asperiores tempore saepe reiciendis, vero quod a dolor corporis natus qui magni quas fuga rem excepturi laboriosam. Quisquam expedita ab fugiat.</p>
</div>
</li>
<li class="warning" slot="simple">
<a>
<span class="circle"><i class="fas fa-exclamation"></i></span>
<span class="label">Third step</span>
</a>
</li>
<li slot="simple">
<a>
<span class="circle">4</span>
<span class="label">Fourth step</span>
</a>
</li>
</mdb-stepper>
</template>
<script>
import { mdbStepper } from 'mdbvue';
export default {
name: 'BadgePage',
components: {
mdbStepper
}
}
</script>
Stepper form with validation MDB Pro component
<template>
<mdb-card class="indigo lighten-5 pb-5">
<mdb-card-body>
<mdb-stepper
class="pt-5"
buttons
validation
:validatedSteps="validatedSteps"
@validate="validate"
>
<mdb-step name="Personal Information" slot="content" icon="user" :number="1">
<h3 class="font-weight-bold pt-3 pl-0 my-4">
<mdb-card-title>Personal Information</mdb-card-title>
</h3>
<mdb-input required label="First Name" v-model="form[0].name" />
<mdb-input required label="Second Name" v-model="form[0].surname" />
<mdb-input required label="Address" v-model="form[0].address" />
</mdb-step>
<mdb-step name="Company Information" slot="content" icon="pen" :number="2">
<h3 class="font-weight-bold pt-3 pl-0 my-4">
<mdb-card-title>Company Information</mdb-card-title>
</h3>
<mdb-input required label="Company Name" v-model="form[1].company" />
<mdb-input required label="Company Address" v-model="form[1].address" />
</mdb-step>
<mdb-step name="Terms and conditions" slot="content" icon="check" :number="3">
<h3 class="font-weight-bold pt-3 pl-0 my-4">
<mdb-card-title>Terms and conditions</mdb-card-title>
</h3>
<mdb-input
type="checkbox"
id="checkbox3"
required
v-model="form[2].condition"
label="I agree to the terms and conditions"
/>
<mdb-input type="checkbox" id="checkbox4" label="I want to receive newsletter" />
</mdb-step>
</mdb-stepper>
</mdb-card-body>
</mdb-card>
</template>
<script>
import {
mdbStepper,
mdbStep,
mdbInput,
mdbCard,
mdbCardBody,
mdbCardTitle
} from "mdbvue";
export default {
components: {
mdbStepper,
mdbStep,
mdbInput,
mdbCard,
mdbCardBody,
mdbCardTitle
},
data() {
return {
validatedSteps: {},
form: [{
name: '',
surname: '',
address: ''
},
{
company: '',
address: ''
},
{
condition: false
}
]
};
},
methods: {
checkForm(form) {
return Object.keys(form).length === Object.keys(form)
.filter(key => form[key].length > 0).length;
},
validate(e) {
if (e === 3) {
this.validatedSteps[e] = this.form[e - 1].condition;
}
else if (this.checkForm(this.form[e - 1])) {
this.validatedSteps[e] = true;
}
else {
this.validatedSteps[e] = false;
}
}
}
};
</script>
Stepper - API
In this section you will find advanced information about the Stepper component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.
Import statement
import { mdbStepper, mdbStep } from 'mdbvue';
API Reference: Properties
Name | Type | Default | Description | Example |
---|---|---|---|---|
buttons |
Boolean | false |
Controls whether to generate navigational buttons below | <mdb-stepper buttons /> |
vertical |
Boolean | false |
Controls whether the generated stepper should be oriented vertically | <mdb-stepper vertical /> |
within |
Boolean | false |
Decides if the generated stepper should be in it's smaller, less dominant form | <mdb-stepper within /> |
simpleH / simpleV |
Boolean | false |
Turns stepper into a purely representational component open for custom logic. Last character decides its orientation | <mdb-stepper simpleH /> |
nextBtn |
String |
|
What should be written on the navigational button turning panes forward. Default value: "next"; the generated stepper should be oriented vertically | <mdb-stepper nextBtn="..." /> |
prevBtn |
String |
|
What should be written on the navigational button turning panes bachwards. Default value: "previous" | <mdb-stepper prevBtn="..." /> |
submitBtn |
String |
|
What should be written on the button at the last pane. Default value: "submit" | <mdb-stepper submitBtn="..." /> |
submitFunction |
Function |
|
The callback for form submission | <mdb-stepper submitFunction="..." /> |
validatedSteps |
Object |
|
Key-value pairs where key is the index of validated step and value is a boolean | <mdb-stepper :validatedSteps="validatedSteps" /> |
API Reference: Events
Event | Description | Example |
---|---|---|
@validate |
Emits an activeStep and allows to perform validation on this step. | <mdb-stepper validation :validatedSteps="validatedSteps" @validate="validate" /> |
@changeStep |
Emits the index of the next step. | <mdb-stepper @changeStep="handler" /> |