Skip to content
A stepper for Bootstrap 4.x
JavaScript HTML CSS
Branch: master
Clone or download

Latest commit

dependabot-preview chore(deps-dev): bump karma-jasmine from 2.0.1 to 3.1.1 (#139)
Bumps [karma-jasmine](https://github.com/karma-runner/karma-jasmine) from 2.0.1 to 3.1.1.
- [Release notes](https://github.com/karma-runner/karma-jasmine/releases)
- [Changelog](https://github.com/karma-runner/karma-jasmine/blob/master/CHANGELOG.md)
- [Commits](karma-runner/karma-jasmine@v2.0.1...v3.1.1)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>
Latest commit 01a51b0 Mar 23, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github CI: switch to `actions/checkout@v2` (#110) Dec 13, 2019
docs Run standard for all files. Aug 27, 2019
scripts feat(build): improve banners Feb 5, 2019
src (chore): remove superfluous argument passed to `buildClickStepLinearL… Mar 23, 2020
tests Run standard for all files. Aug 27, 2019
.babelrc refactor(ut): rewrite unit tests in es6 Jun 19, 2019
.browserslistrc fix build Oct 11, 2018
.editorconfig init plugin structure Oct 10, 2018
.gitattributes Enforce LF. Oct 7, 2019
.gitignore create docs Oct 12, 2018
.stylelintrc feat(core): rewrite css smartly Feb 25, 2019
CHANGELOG.md chore(release): 1.7.0 Jul 24, 2019
LICENSE Initial commit Oct 10, 2018
README.md Switch to GitHub Actions CI. (#92) Nov 12, 2019
bs-stepper.d.ts fix(typing): improve typescript typing Jun 19, 2019
package-lock.json chore(deps-dev): bump karma-jasmine from 2.0.1 to 3.1.1 (#139) Mar 23, 2020
package.json chore(deps-dev): bump karma-jasmine from 2.0.1 to 3.1.1 (#139) Mar 23, 2020
rollup.config.js chore(deps): move to terser-js Mar 21, 2019

README.md

bs-stepper

npm version dependencies Status devDependencies Status Build Status Coverage Status JavaScript Style Guide JS gzip size CSS gzip size

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.

Demo

If you want to see our latest changes checkout https://bs-stepper.netlify.com/

Features:

  • Linear stepper
  • Non linear stepper
  • Fade effect with .fade
  • Vertical stepper
  • Works with Bootstrap 4
  • Accessible
  • Works without dependencies (so no jQuery needed)
  • Built in UMD so it can be used everywhere
  • Small, only 2kb

Table of contents

Install

With npm or yarn

// npm
npm install bs-stepper --save

// yarn
yarn add bs-stepper

CDN

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

HTML markup

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>
  • If you want to use the fade animation, add the .fade class on your .content and set animation to true.
  • To create a vertical stepper, just add the .vertical class on your stepper. All steppers will switch to vertical on small viewports.

JavaScript

In HTML before the end of the <body> tag

<script src="bs-stepper.min.js"></script>

Or with npm

import Stepper from 'bs-stepper'

Create a 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.

Methods

constructor

Create an instance of Stepper, accepts two parameters.

Parameters

  • element
  • type: DOMElement

Pass your Stepper DOMElement

  • options (optional)

    • type: Object

    default value:

    {
      linear: true,
      animation: false,
      selectors: {
        steps: '.step',
        trigger: '.step-trigger',
        stepper: '.bs-stepper'
      }
    }

    Allows you to customize the stepper selectors and its behavior.

next

Will navigate to the next step of your stepper. This method also emits the show.bs-stepper event before showing the step and the shown.bs-stepper even when the step is displayed.

var stepper = new Stepper(document.querySelector('.bs-stepper'))
stepper.next()

previous

Will navigate to the previous step of your stepper. This method also emits the show.bs-stepper event before showing the step and the shown.bs-stepper event when the step is displayed.

to

Will navigate to a step of your stepper. This method also emits the show.bs-stepper event before showing the step and the shown.bs-stepper event when the step is displayed.

var stepper = new Stepper(document.querySelector('.bs-stepper'))

/// Will navigate to the second step
stepper.to(2)

reset

Will reset your stepper to the first step (useful for linear stepper). This method also emits the show.bs-stepper before showing the step and the shown.bs-stepper event when the step is displayed.

destroy

Remove stored data related to your stepper and listeners.

Events

The methods which triggers a step change trigger two events:

  • show.bs-stepper
  • shown.bs-stepper

You can listen on those events like this:

var stepperEl = document.getElementById('stepper')
var stepper = new Stepper(stepperEl)

stepperEl.addEventListener('show.bs-stepper', function (event) {
  // You can call preventDefault 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.

Compatibility

bsStepper is compatible with:

  • IE10+
  • Edge
  • Firefox
  • Chrome
  • Safari
  • Chrome Android
  • Safari iOS

You can find our BrowserStack list of browsers here.

Support me

If you want to thank me or support my work:

Thanks

BrowserStack Logo

Thanks to BrowserStack for providing the infrastructure that allows us to test in real browsers!

License

MIT

You can’t perform that action at this time.