org.webjars.npm:bs-stepper
Advanced tools
A stepper plugin for Bootstrap 4.
You can use it on React and Angular too because this plugin is written with the most used JavaScript framework: VanillaJS.
If you want to see our last changes it's here: https://bs-stepper.netlify.com/
Features:
.fade// npm
npm install bs-stepper --save
// yarn
yarn add bs-stepper
| 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 |
Include the CSS file:
<link rel="stylesheet" href="bs-stepper.min.css">
Add the following HTML:
<div class="bs-stepper">
<div class="bs-stepper-header" role="tablist">
<!-- your steps here -->
<div class="step" data-target="#logins-part">
<button type="button" class="step-trigger" role="tab" aria-controls="logins-part" id="logins-part-trigger">
<span class="bs-stepper-circle">1</span>
<span class="bs-stepper-label">Logins</span>
</button>
</div>
<div class="line"></div>
<div class="step" data-target="#information-part">
<button type="button" class="step-trigger" role="tab" aria-controls="information-part" id="information-part-trigger">
<span class="bs-stepper-circle">2</span>
<span class="bs-stepper-label">Various information</span>
</button>
</div>
</div>
<div class="bs-stepper-content">
<!-- your steps content here -->
<div id="logins-part" class="content" role="tabpanel" aria-labelledby="logins-part-trigger"></div>
<div id="information-part" class="content" role="tabpanel" aria-labelledby="information-part-trigger"></div>
</div>
</div>
fade animation, add .fade class on your .content and set animation to true..vertical class on your stepper. All steppers will switch to vertical on small viewports.In HTML before the end of the <body> tag
<script src="bs-stepper.min.js"></script>
Or with npm
import Stepper from 'bs-stepper'
You should wait for the document ready event and create a new instance of Stepper.
Vanilla JS
document.addEventListener('DOMContentLoaded', function () {
var stepper = new Stepper(document.querySelector('.bs-stepper'))
})
With jQuery
$(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.
Create an instance of Stepper, accept two parameters.
elementDOMElementPass your Stepper DOMElement
options (optional)
Objectdefault value:
{
linear: true,
animation: false,
selectors: {
steps: '.step',
trigger: '.step-trigger',
stepper: '.bs-stepper'
}
}
Allows you to customize the stepper selectors and it's behaviour.
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.
var stepper = new Stepper(document.querySelector('.bs-stepper'))
stepper.next()
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.
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.
var stepper = new Stepper(document.querySelector('.bs-stepper'))
/// Will navigate to the second step
stepper.to(2)
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.
Remove stored data relative to your stepper and listeners.
The methods which trigger a step change trigger two events:
show.bs-steppershown.bs-stepperYou can listen on those events like that:
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.
bsStepper is compatible with:
You can find our BrowserStack list of browsers here.
If you want to thank me or supporting my work:
Thanks to BrowserStack for providing the infrastructure that allows us to test in real browsers!
FAQs
WebJar for bs-stepper
We found that org.webjars.npm:bs-stepper demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm campaign is targeting Ethereum developers by impersonating Hardhat plugins and the Nomic Foundation, stealing sensitive data like private keys.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.