当前位置：首页 > 软件库 > Web应用开发 > CSS框架 >

bs-stepper

A stepper for Bootstrap 4.x

授权协议 MIT License

开发语言 HTML/CSS

所属分类 Web应用开发、 CSS框架

软件类型开源软件

地区不详

投递者乐正洲

操作系统跨平台

开源组织无

适用人群未知

软件概览

bs-stepper

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 check out 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

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

Include the script before the end of the <body> HTML 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.

Will navigate to the next step of your stepper. This method also emits the show.bs-stepperevent 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()

Will navigate to the previous step of your stepper. This method also emits the show.bs-stepperevent 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 eventbefore 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 emitsthe 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:

You can become my Patron
Or buy me a coffee: PayPal

Thanks

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

License

MIT

bs-stepper

bs-stepper

Table of contents

Install

With npm or yarn

CDN

How to use it

HTML markup

JavaScript

Create a stepper

Methods

constructor

Parameters

next

previous

to

reset

destroy

Events

Compatibility

Support me

Thanks

License

同类工具

相关阅读

相关文章

相关问答

相关文档