Vue Bootstrap Stepper
Vue Stepper - Bootstrap 4 & Material Design
Note: This documentation is for an older version of Bootstrap (v.4). A
newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for
Bootstrap 5.
Go to docs v.5
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.
All Steppers (apart from within version) can be aligned vertically as well as horizontally.
This documentation may contain syntax introduced in the MDB Vue 6.0.0 and can be not compatible with previous versions. See legacy docs.
Vue live preview Vue live preview (PRO)Simple Vertical Stepper
In the MDB Vue Free Package stepper has value of SimpleV the property set to true by default, although it is still recommended to add this property to avoid code changes in case of an upgrade.
<template>
<mdb-stepper simpleV :steps="verticalStepper" v-model="currentStep"/>
</template>
<script>
import { mdbStepper } from 'mdbvue';
export default {
components: {
mdbStepper,
},
data() {
return {
currentStep: 2,
verticalStepper: [
{
content:
"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."
},
{
content:
"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."
},
{
content:
"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."
}
],
};
}
};
</script>
Simple Horizontal Stepper
To change Stepper's orientation to horizontal, add SimpleH property.
<template>
<mdb-stepper simpleH :steps="steps"/>
</template>
<script>
import { mdbStepper } from 'mdbvue';
export default {
components: {
mdbStepper,
},
data() {
return {
steps: [
{
content:
"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."
},
{
content:
"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."
},
{
content:
"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."
}
],
};
}
};
</script>
Simple Vertical Stepper MDB Pro component
In MDB Vue Pro version in order to use Simple vertical stepper, set SimpleV property to true. You can customize your stepper further - to view the list of all available props and events, visit the API tab.
<template>
<mdb-stepper simpleV :steps="4">
<template #1>
<form>
<mdb-input label="name"/>
</form>
</template>
<template #2>
<form>
<mdb-input label="email" type="email"/>
</form>
</template>
<template #3>
<form>
<mdb-input label="message" type="textarea" :rows="4"/>
</form>
</template>
<template #4>
<p>Finish!</p>
</template>
</mdb-stepper>
</template>
<script>
import { mdbStepper, mdbInput } from 'mdbvue';
export default {
components: {
mdbStepper, mdbInput
}
};
</script>
Simple Vertical Stepper - Linear MDB Pro component
To prevent the user from going more than one step ahead, add the prop linear to your stepper.
<template>
<mdb-stepper simpleV :steps="4" linear>
<template #1>
<form>
<mdb-input label="name"/>
</form>
</template>
<template #2>
<form>
<mdb-input label="email" type="email"/>
</form>
</template>
<template #3>
<form>
<mdb-input label="message" type="textarea" :rows="4"/>
</form>
</template>
<template #4>
<p>Finish!</p>
</template>
</mdb-stepper>
</template>
<script>
import { mdbStepper, mdbInput } from 'mdbvue';
export default {
components: {
mdbStepper,
mdbInput
}
};
</script>
Simple Vertical Stepper - Validation MDB Pro component
In order to validate a step before allowing user to go to the next one, add the following properties to your stepper: validation and validatedSteps. User will be able to access only steps which corresponding keys in the validatedSteps object have the value set to true. Every time user attempts to change a step, @validate event will be emitted - it's handler should evaluate the current step and change its value in the validatedSteps prop.
<template>
<mdb-stepper
simpleV
:steps="3"
buttons
validation
:validatedSteps="validatedSteps"
@validate="validate"
@submit="submit"
>
<template #1>
<form ref="vertical1">
<mdb-input label="name" v-model="name" required />
</form>
</template>
<template #2>
<form ref="vertical2">
<mdb-input label="surname" v-model="surname" required />
</form>
</template>
<template #3>
<p>Finish!</p>
</template>
</mdb-stepper>
</template>
<script>
import {
mdbStepper,
mdbInput
} from "mdbvue";
export default {
components: {
mdbStepper,
mdbInput
},
data() {
return {
name: "",
surname: "",
validatedSteps: {}
};
},
methods: {
validate(step) {
this.$refs[`vertical${step}`].classList.add("was-validated");
if (step === 1 && this.name.length > 0)
this.validatedSteps[1] = true;
else if (step === 2 && this.surname.length > 0)
this.validatedSteps[2] = true;
},
submit() {
console.log(`${this.name} has submitted the form.s`);
}
}
};
</script>
Simple Horizontal Stepper MDB Pro component
To change Stepper's orientation to vertical, add SimpleV property.
<template>
<mdb-stepper simpleH :steps="4">
<template #1>
<form>
<mdb-input label="name"/>
</form>
</template>
<template #2>
<form>
<mdb-input label="email" type="email"/>
</form>
</template>
<template #3>
<form>
<mdb-input label="message" type="textarea" :rows="4"/>
</form>
</template>
<template #4>
<p>Finish!</p>
</template>
</mdb-stepper>
</template>
<script>
import { mdbStepper, mdbInput } from 'mdbvue';
export default {
components: {
mdbStepper,
mdbInput
}
};
</script>
Horizontal Stepper MDB Pro component
To display icons in step buttons, pass an array to the steps property and specify an icon for each step.
<template>
<mdb-stepper buttons :steps="registrationStepper" @submit="submit">
<template #1>
<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" />
</template>
<template #2>
<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-input type="textarea" label="Address" />
</template>
<template #3>
<h3 class="font-weight-bold pl-0 m-4">
<strong>Terms and conditions</strong>
</h3>
<mdb-input
type="checkbox"
id="checkbox1"
label="I agree to the terms and conditions"
/>
<mdb-input
class="mb-5"
type="checkbox"
id="checkbox2"
label="I want to receive newsletter"
/>
</template>
<template #4>
<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>
</template>
</mdb-stepper>
</template>
<script>
import {
mdbStepper,
mdbInput
} from "mdbvue";
export default {
components: {
mdbStepper,
mdbInput,
},
data() {
return {
registrationStep: 2,
registrationStepper: [
{ icon: "folder", far: true, name: "Basic Information" },
{ icon: "pencil-alt", name: "Personal Data" },
{ icon: "image", far: true, name: "Terms and Conditions" },
{ icon: "check", name: "Finish" }
],
}
},
methods: {
submit() {
console.log('submitted');
}
}
};
</script>
Horizontal Stepper - color variations MDB Pro component
You can control the stepper's appearance with options property. Visit the API tab to explore all available settings.
<template>
<mdb-stepper buttons :steps="registrationStepper" @submit="submit" :options="options">
<template #1>
<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" />
</template>
<template #2>
<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-input type="textarea" label="Address" />
</template>
<template #3>
<h3 class="font-weight-bold pl-0 m-4">
<strong>Terms and conditions</strong>
</h3>
<mdb-input
type="checkbox"
id="checkbox1"
label="I agree to the terms and conditions"
/>
<mdb-input
class="mb-5"
type="checkbox"
id="checkbox2"
label="I want to receive newsletter"
/>
</template>
<template #4>
<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>
</template>
</mdb-stepper>
</template>
<script>
import {
mdbStepper,
mdbInput
} from "mdbvue";
export default {
components: {
mdbStepper,
mdbInput,
},
data() {
return {
registrationStep: 2,
registrationStepper: [
{ icon: "folder", far: true, name: "Basic Information" },
{ icon: "pencil-alt", name: "Personal Data" },
{ icon: "image", far: true, name: "Terms and Conditions" },
{ icon: "check", name: "Finish" }
],
options: {
stepBtn: { color: "info", active: "amber", iconClass: "white-text" },
nextBtn: { outline: "info", icon: "chevron-right" },
prevBtn: { outline: "info", icon: "chevron-left" },
submitBtn: { color: "amber", icon: "check" },
lineColor: "amber"
},
}
},
methods: {
submit() {
console.log('submitted');
}
}
};
</script>
Horizontal Stepper - validation MDB Pro component
<template>
<mdb-stepper
class="pt-5"
buttons
validation
:validatedSteps="validatedSteps"
@validate="validate"
@submit="submit"
:steps="validationStepper"
:options="validationOptions"
>
<template #1>
<h3 class="font-weight-bold pt-3 pl-0 my-4">
<h2>Personal Information</h2>
</h3>
<form ref="form1">
<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" />
</form>
</template>
<template #2>
<h3 class="font-weight-bold pt-3 pl-0 my-4">
<h2>Company Information</h2>
</h3>
<form ref="form2">
<mdb-input required label="Company Name" v-model="form[1].company" />
<mdb-input required label="Company Address" v-model="form[1].address" />
</form>
</template>
<template #3>
<h3 class="font-weight-bold pt-3 pl-0 my-4">
<h2>Terms and conditions</h2>
</h3>
<form ref="form3">
<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" />
</form>
</template>
</mdb-stepper>
</template>
<script>
import {
mdbStepper,
mdbInput,
} from "mdbvue";
export default {
components: {
mdbStepper,
mdbInput,
},
data() {
return {
validationStepper: [
{ icon: "folder", far: true, name: "Basic Information" },
{ icon: "pencil-alt", name: "Company" },
{ icon: "check", name: "Finish" }
],
validationOptions: {
stepBtn: {
outline: "pink",
active: "pink",
iconClass: "pink-text"
},
nextBtn: {
outline: "pink"
},
prevBtn: {
outline: "pink"
},
submitBtn: {
color: "success"
},
lineColor: "pink"
},
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(step) {
this.$refs[`form${step}`].classList.add("was-validated");
if (step === 3) {
this.validatedSteps[step] = this.form[step - 1].condition;
} else if (this.checkForm(this.form[step - 1])) {
this.validatedSteps[step] = true;
} else {
this.validatedSteps[step] = false;
}
},
submit() {
this.validate(3);
if (this.validatedSteps[3]) {
console.log("submited!");
}
},
}
};
</script>
Vertical Stepper MDB Pro component
To change stepper's orientation to vertical, set vertical property to true
<template>
<mdb-stepper vertical buttons :steps="registrationStepper" :options="options">
<template #1>
<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" />
</template>
<template #2>
<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-input type="textarea" label="Address" />
</template>
<template #3>
<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" />
</template>
<template #4>
<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>
</template>
</mdb-stepper>
</template>
<script>
import {
mdbStepper,
mdbInput
} from "mdbvue";
export default {
components: {
mdbStepper,
mdbInput,
},
data() {
return {
registrationStepper: [
{ icon: "folder", far: true, name: "Basic Information" },
{ icon: "pencil-alt", name: "Personal Data" },
{ icon: "image", far: true, name: "Terms and Conditions" },
{ icon: "check", name: "Finish" }
],
options: {
stepBtn: { color: "info", active: "amber", iconClass: "white-text" },
nextBtn: { outline: "info", icon: "chevron-right" },
prevBtn: { outline: "info", icon: "chevron-left" },
submitBtn: { color: "amber", icon: "check" },
lineColor: "amber"
},
}
},
methods: {
submit() {
console.log('submitted');
}
}
};
</script>
Stepper within form MDB Pro component
<template>
<mdb-card class="m-5 p-5">
<mdb-card-body>
<h2 class="text-center font-weight-bold pt-4 pb-5">
<strong>Steps form example</strong>
</h2>
<mdb-stepper within buttons :steps="3">
<template #1>
<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-input type="textarea" label="Address" />
</template>
<template #2>
<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-input type="textarea" label="Address" />
</template>
<template #3>
<h3 class="font-weight-bold pl-0 my-4">
<strong>Step 3</strong>
</h3>
</template>
</mdb-stepper>
</mdb-card-body>
</mdb-card>
</template>
<script>
import {
mdbStepper,
mdbInput,
mdbCard,
mdbCardBody
} from "mdbvue";
export default {
components: {
mdbStepper,
mdbInput,
mdbCard,
mdbCardBody
}
};
</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 } from 'mdbvue';
Simple Stepper
The simple mdbStepper is available in two versions - horizontal
and vertical.
API Reference: Properties
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
simpleH
|
Boolean | true |
Changes the stepper's layout to the horizontal version |
<mdb-stepper simpleH />
|
simpleV
|
Boolean | false |
Changes the stepper's layout to simple, vertical version. |
<mdb-stepper simpleV />
|
steps (required)
|
Array, Number | false |
Controlls the number of steps - see required data structure for rendering content below |
<mdb-stepper :steps="steps" />
|
API Reference: Directives and methods
| Name | Description | Example |
|---|---|---|
v-model
|
Allows to change active step from the outside. |
<mdb-stepper v-model="step" />
|
@input
|
Emits current step's index (starts at 1) |
<mdb-stepper @input="showIndex" />
|
Data structure
const steps = [ { name, content }, { name, content }, ... , { name,
content } ];
The value of content will be rendered for each step
separately and shown when the given step is active. The
name will replace the default step's title (f.e. "Step 1")
with the given value.
Stepper PRO - introduction MDB Pro component
The PRO version of the mdbStepper stepper component is much
more advanced - it offers many customization options and layout versions.
Rendering content
The
mdbStepperhas one required property -stepswith two accepted datatypes:ArrayandNumber. Based on this value component will calculate the number of steps and neccessary slots. Each slot is named by according to its order (starting at 1), f.e:#1/v-slot:1.
<mdb-stepper :step="2">
<template v-slot:1>
<div>
<h2>First slot!</h2>
<p>Content</p>
</div>
</template>
<template v-slot:2>
<div>
<h2>Second slot!</h2>
<p>Content</p>
</div>
</template>
</mdb-stepper>
Remember that v-slot directive can be used only on the
template element.
v-slot:1 can be used interchangeably with
#1 syntax.
Default Stepper
Although the only prop required for default mdbStepper to
work is steps property, this component can be customized in
multiple ways. Below we have listed all available options.
API Reference: Properties
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
steps (required)
|
Array, Number | - |
Determines number of steps and allows to set an icon for each step. See the data structure below. |
<mdb-stepper :steps="steps" />
|
buttons
|
Boolean | false |
When set to true it will add next, previous and submit buttons to
your stepper. Button can be customized by
options prop.
|
<mdb-stepper buttons :steps="4" />
|
disabled
|
Boolean | false |
Disables all buttons in a stepper |
<mdb-stepper disabled />
|
options
|
Object |
see default settings below
|
Allows to customize buttons and a horizontal line's color. All available options are listed below. |
<mdb-stepper :steps="steps" button :options="options."
/>
|
linear
|
Boolean | false |
Prevents user from jumping further than one step ahead |
<mdb-stepper :steps="steps" linear />
|
verical
|
Boolean | false |
Changes orientation of the stepper to vertical |
<mdb-stepper :steps="steps" vertical />
|
validation
|
Boolean | false |
Activates validation. User won't be able to access steps which are not set to true in validatedSteps object
|
<mdb-stepper :steps="steps" validation :validatedSteps="validated" />
|
validatedSteps
|
Object | |
Required for steppers with validation property set to true. Each key corresponds to step's index - if its value is true user will be able to move forward
|
<mdb-stepper :steps="steps" validation :validatedSteps="validated" />
|
API Reference: Directives and methods
| Name | Description | Example |
|---|---|---|
v-model
|
Allows to change active step from the outside. |
<mdb-stepper :steps="steps" v-model="step" />
|
@changeStep
|
Emits current step's index (starts at 1) |
<mdb-stepper @changeStep="showIndex" />
|
@submit
|
Emitted when the submit button is clicked |
<mdb-stepper buttons @submit="submit" />
|
@validate
|
Emitted when user attempts to change a step to the next in the stepper with validation property. This event allows to review the current step's content and decide if user shoud be allowed to go to the next. Validation should update the value of the validatedSteps property. |
<mdb-stepper validation :validatedSteps="validated" @validate="validate" />
|
Data structure
Steps
const step = {
name: "String",
icon: "String",
far: "Boolean",
fab: "Boolean",
fal: "Boolean",
fad: "Boolean" };
const steps = [
{
name: "Basic information",
icon: "paper-plane",
far: true
},
{
name: "Send",
icon: "user"
}
];
Options
const options = {
stepBtn: {
active: "String - background color for a button representing an active step",
color: "String - background color for all buttons",
outline: "String - outline color for all buttons - alternative for the color key",
iconClass: "String - changes color of the step icon"
},
nextBtn: {
color: "String - background color for all buttons",
outline: "String - outline color for all buttons - alternative for the color key",
icon: "String",
text: "String",
far: "Boolean",
fal: "Boolean",
fad: "Boolean",
fab: "Boolean"
},
prevBtn: {
color: "String - background color for all buttons",
outline: "String - outline color for all buttons - alternative for the color key",
icon: "String",
text: "String",
far: "Boolean",
fal: "Boolean",
fad: "Boolean",
fab: "Boolean"
},
prevBtn: {
color: "String - background color for all buttons",
outline: "String - outline color for all buttons - alternative for the color key",
icon: "String",
text: "String",
far: "Boolean",
fal: "Boolean",
fad: "Boolean",
fab: "Boolean"
},
lineColor: "String",
verticalSpacing: "Number - minimum height of the vertical stepper element is calculated based on this number and quantity of steps. (Default: 120)"
};
const options = {
stepBtn: {
outline: "indigo",
active: "indigo",
iconClass: "indigo-text"
},
nextBtn: {
color: "indigo",
text: "Next"
},
prevBtn: {
color: "indigo",
text: "Previous"
},
submitBtn: {
color: "success",
text: "Submit"
},
lineColor: "indigo",
vericalSpacing: 120
};
Stepper within
Although the only prop required for default mdbStepper to
work is steps property, this component can be customized in
multiple ways. Below we have listed all available options.
API Reference: Properties
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
steps (required)
|
Array, Number | - |
Determines number of steps and allows to set an icon for each step. See the data structure below. |
<mdb-stepper within :steps="steps" />
|
within
|
Boolean | false |
Changes the stepper's layout to within option |
<mdb-stepper within :steps="steps" />
|
buttons
|
Boolean | false |
When set to true it will add next, previous and submit buttons to
your stepper. Button can be customized by
options prop.
|
<mdb-stepper within buttons :steps="4" />
|
disabled
|
Boolean | false |
Disables all buttons in a stepper |
<mdb-stepper disabled />
|
options
|
Object |
see default settings below
|
Allows to customize buttons - all available options are listed below. |
<mdb-stepper within :steps="steps" button :options="options"
/>
|
validation
|
Boolean | false |
Activates validation. User won't be able to access steps which are not set to true in validatedSteps object
|
<mdb-stepper within :steps="steps" validation :validatedSteps="validated" />
|
validatedSteps
|
Object | |
Required for steppers with validation property set to true. Each key corresponds to step's index - if its value is true user will be able to move forward
|
<mdb-stepper within :steps="steps" validation :validatedSteps="validated" />
|
linear
|
Boolean | false |
Prevents user from jumping further than one step ahead |
<mdb-stepper within :steps="steps" linear />
|
API Reference: Directives and methods
| Name | Description | Example |
|---|---|---|
v-model
|
Allows to change active step from the outside. |
<mdb-stepper :steps="steps" v-model="step" />
|
@changeStep
|
Emits current step's index (starts at 1) |
<mdb-stepper @changeStep="showIndex" />
|
@submit
|
Emitted when the submit button is clicked |
<mdb-stepper buttons @submit="submit" />
|
@validate
|
Emitted when user attempts to change a step to the next in the stepper with validation property. This event allows to review the current step's content and decide if user shoud be allowed to go to the next. Validation should update the value of the validatedSteps property. |
<mdb-stepper validation :validatedSteps="validated" @validate="validate" />
|
Data structure
Steps
const step = {
name: "String",
icon: "String",
far: "String",
fab: "String",
fal: "String",
fad: "String"
};
const steps = [
{
name: "Step 1",
icon: "paper-plane",
far: true
},
{
name: "Step 2",
icon: "map"
}
];
Options
const options = {
withinBtn: {
active: "String - background color for a button representing an active step",
color: "String - background color for all buttons",
},
nextBtn: {
color: "String - background color for all buttons",
outline: "String - outline color for all buttons - alternative for the color key",
icon: "String",
text: "String",
far: "Boolean",
fal: "Boolean",
fad: "Boolean",
fab: "Boolean"
},
prevBtn: {
color: "String - background color for all buttons",
outline: "String - outline color for all buttons - alternative for the color key",
icon: "String",
text: "String",
far: "Boolean",
fal: "Boolean",
fad: "Boolean",
fab: "Boolean"
},
submitvBtn: {
color: "String - background color for all buttons",
outline: "String - outline color for all buttons - alternative for the color key",
icon: "String",
text: "String",
far: "Boolean",
fal: "Boolean",
fad: "Boolean",
fab: "Boolean"
}
};
const options = {
withinBtn: {
color: "default",
active: "indigo",
},
nextBtn: {
color: "indigo",
text: "Next"
},
prevBtn: {
color: "indigo",
text: "Previous"
},
submitBtn: {
color: "success",
text: "Submit"
}
};
Simple stepper
In the free version of this stepper, the content is rendered via content key passed to steps property. It will still work in the pro version, but for more complicated steppers we recommend using template elements with the v-slot directive.
API Reference: Properties
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
steps (required)
|
Array, Number | - |
Determines number of steps and allows to set an icon for each step. See the data structure below. |
<mdb-stepper within :steps="steps" />
|
simpleV
|
Boolean | false |
Changes the stepper's layout to simple vertical varsion |
<mdb-stepper simpleV :steps="4" />
|
simpleH
|
Boolean | false |
Changes the stepper's layout to simple horizontal varsion |
<mdb-stepper simpleH :steps="4" />
|
buttons
|
Boolean | false |
When set to true it will add next, previous and submit buttons to
your stepper. Button can be customized by
options prop.
|
<mdb-stepper within buttons :steps="4" />
|
disabled
|
Boolean | false |
Disables all buttons in a stepper |
<mdb-stepper disabled />
|
options
|
Object |
see default settings below
|
Allows to customize buttons - all available options are listed below. |
<mdb-stepper within :steps="steps" button :options="options"
/>
|
validation
|
Boolean | false |
Activates validation. User won't be able to access steps which are not set to true in validatedSteps object
|
<mdb-stepper within :steps="steps" validation :validatedSteps="validated" />
|
validatedSteps
|
Object | |
Required for steppers with validation property set to true. Each key corresponds to step's index - if its value is true user will be able to move forward
|
<mdb-stepper within :steps="steps" validation :validatedSteps="validated" />
|
linear
|
Boolean | false |
Prevents user from jumping further than one step ahead |
<mdb-stepper within :steps="steps" linear />
|
API Reference: Directives and methods
| Name | Description | Example |
|---|---|---|
v-model
|
Allows to change active step from the outside. |
<mdb-stepper :steps="steps" v-model="step" />
|
@changeStep
|
Emits current step's index (starts at 1) |
<mdb-stepper @changeStep="showIndex" />
|
@submit
|
Emitted when the submit button is clicked |
<mdb-stepper buttons @submit="submit" />
|
@validate
|
Emitted when user attempts to change a step to the next in the stepper with validation property. This event allows to review the current step's content and decide if user shoud be allowed to go to the next. Validation should update the value of the validatedSteps property. |
<mdb-stepper validation :validatedSteps="validated" @validate="validate" />
|
Data structure
Steps
const step = {
name: "String",
content: "String"
};
const steps = [
{
name: "Step 1",
content: "Optional content"
},
{
name: "Step 2",
}
];
Options
const options = {
stepBtn: {
color: "String - background color of inactive step buttons"
},
nextBtn: {
color: "String - background color for all buttons",
text: "String",
},
prevBtn: {
color: "String - background color for all buttons",
text: "String",
},
submitBtn: {
color: "String - background color for all buttons",
text: "String",
}
};
nextBtn: {
color: "indigo",
text: "Next"
},
prevBtn: {
color: "indigo",
text: "Previous"
},
submitBtn: {
color: "success",
text: "Submit"
}
};