A stepper for Bootstrap 4
npm install bs-stepper.fade
sh
// npm
npm install bs-stepper --save
// yarn
yarn add bs-stepper
`
$3
CDN | Link
------------ | -------------
jsDelivr, js minified | https://cdn.jsdelivr.net/npm/bs-stepper/dist/js/bs-stepper.min.js
jsDelivr, css minified | https://cdn.jsdelivr.net/npm/bs-stepper/dist/css/bs-stepper.min.css
How to use it
$3
Include the CSS file:
`html
`
Add the following HTML:
`html
`
- If you want to use the fade fade animation, add .fade class on your .content and set animation to true.
- To create a vertical stepper, just add .vertical class on your stepper. All steppers will switch to vertical on small viewports.
$3
In HTML before the end of the tag
`html
`
Or with npm
`js
import Stepper from 'bs-stepper'
`
$3
You should wait for the document ready event and create a new instance of Stepper.
Vanilla JS
`js
document.addEventListener('DOMContentLoaded', function () {
var stepper = new Stepper(document.querySelector('.bs-stepper'))
})
`
With jQuery
`js
$(document).ready(function () {
var stepper = new Stepper($('.bs-stepper')[0])
})
`
For more examples check out this file.
This library is UMD ready so you can use it everywhere.
Methods
$3
Create an instance of Stepper, accept two parameters.
#### Parameters
- element
- type: DOMElement
Pass your Stepper DOMElement
- options (optional)
- type: Object
default value:
`js
{
linear: true,
animation: false,
selectors: {
steps: '.step',
trigger: '.step-trigger',
stepper: '.bs-stepper'
}
}
`
Allows you to customize the stepper selectors and it's behaviour.
$3
Will navigate to the next step of your stepper. This method also emit show.bs-stepper before showing the step and
shown.bs-stepper when the step is displayed.
`js
var stepper = new Stepper(document.querySelector('.bs-stepper'))
stepper.next()
`
$3
Will navigate to the previous step of your stepper. This method also emit show.bs-stepper before showing the step and
shown.bs-stepper when the step is displayed.
$3
Will navigate to a step of your stepper. This method also emit show.bs-stepper before showing the step and
shown.bs-stepper when the step is displayed.
`js
var stepper = new Stepper(document.querySelector('.bs-stepper'))
/// Will navigate to the second step
stepper.to(2)
`
$3
Will reset you stepper to the first step (usefull for linear stepper). This method also emit show.bs-stepper before showing the step and
shown.bs-stepper when the step is displayed.
$3
Remove stored data relative to your stepper and listeners.
Events
The methods which trigger a step change trigger two events:
- show.bs-stepper
- shown.bs-stepper
You can listen on those events like that:
`js
var stepperEl = document.getElementById('stepper')
var stepper = new Stepper(stepperEl)
stepperEl.addEventListener('show.bs-stepper', function (event) {
// You can call prevent to stop the rendering of your step
// event.preventDefault()
console.warn(event.detail.indexStep)
})
stepperEl.addEventListener('shown.bs-stepper', function (event) {
console.warn('step shown')
})
`
The event detail object contains the following properties:
`
{
indexStep: contains the id of the step which will be displayed,
to: alias of indexStep,
from: previous step id (or current step id)
}
`
If you need to prevent the display of a step, you have to call preventDefault on the show.bs-stepper` listener.