Need Package Maintenance
Unleash awesomeness. Private packages, team management tools, and powerful integrations. Get started with npm Orgs »

bs-stepper

1.3.0 • Public • Published

bs-stepper

npm version dependencies Status devDependencies Status Build Status Coveralls github branch 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 last changes it's here: 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 and jQuery
  • Built in UMD to be used everywhere
  • Small, only 2kb and less if you gzip it

Table of contents

Install

With npm or yarn

// npm
npm install bs-stepper --save
 
// yarn
yarn add bs-stepper

CDN

CDN Link
unpkg https://unpkg.com/bs-stepper
unpkg, js minified https://unpkg.com/bs-stepper/dist/js/bs-stepper.min.js
unpkg, css minified https://unpkg.com/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="btn btn-link 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="btn btn-link 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 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.

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, accept two parameters.

Parameters

  • element
  • type: DOMElement

Pass your Stepper DOMElement

  • options (optional)

    • default value: { linear: true, animation: false }
    • type: Object

    Allows you to choose if you want a linear stepper or not and if you want to animate when the content will be displayed.

next

Will navigate to the next step of your stepper

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

previous

Will navigate to the previous step of your stepper

reset

Will reset you stepper to the first step (usefull for linear stepper)

destroy

Remove stored data relative to your stepper and listeners.

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, you can support me and become my Patron

Thanks

BrowserStack Logo

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

License

MIT

install

npm i bs-stepper

Downloadsweekly downloads

1,011

version

1.3.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability