Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/johann-s/bs-stepper
A stepper for Bootstrap 4.x
https://github.com/johann-s/bs-stepper
bootstrap bootstrap-4 bootstrap4 css css3 stepper vanilla-javascript vanilla-js vanillajs
Last synced: about 1 month ago
JSON representation
A stepper for Bootstrap 4.x
- Host: GitHub
- URL: https://github.com/johann-s/bs-stepper
- Owner: Johann-S
- License: mit
- Created: 2018-10-10T20:21:56.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-03-10T10:23:13.000Z (8 months ago)
- Last Synced: 2024-10-11T06:41:57.528Z (about 1 month ago)
- Topics: bootstrap, bootstrap-4, bootstrap4, css, css3, stepper, vanilla-javascript, vanilla-js, vanillajs
- Language: JavaScript
- Homepage: https://johann-s.github.io/bs-stepper/
- Size: 2.11 MB
- Stars: 446
- Watchers: 12
- Forks: 89
- Open Issues: 67
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# bs-stepper
[](https://www.npmjs.com/package/bs-stepper)
[](https://david-dm.org/Johann-S/bs-stepper)
[](https://david-dm.org/Johann-S/bs-stepper?type=dev)
[](https://github.com/Johann-S/bs-stepper/actions?workflow=Tests)
[](https://coveralls.io/github/Johann-S/bs-stepper?branch=master)
[](https://standardjs.com/)
[](https://github.com/Johann-S/bs-stepper/tree/gh-pages/dist/js/bs-stepper.min.js)
[](https://github.com/Johann-S/bs-stepper/tree/gh-pages/dist/css/bs-stepper.min.css)
A stepper plugin for Bootstrap 4.
You can use it on [React](https://stackblitz.com/edit/bs-stepper-react) and [Angular](https://stackblitz.com/edit/bs-stepper-angular) too because this plugin is written with the most used JavaScript framework: [VanillaJS](http://vanilla-js.com/).
[Demo](https://johann-s.github.io/bs-stepper/)
If you want to see our latest changes check out
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](#install)
- [How to use it](#how-to-use-it)
- [Methods](#methods)
- [Events](#events)
- [Compatibility](#compatibility)
- [Support me](#support-me)
- [Thanks](#thanks)
- [License](#license)
## Install
### With npm or yarn
```sh
# 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`](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`](https://cdn.jsdelivr.net/npm/bs-stepper/dist/css/bs-stepper.min.css)
## How to use it
### HTML markup
Include the CSS file:
```html
```
Add the following HTML:
```html
1
Logins
2
Various information
```
- 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 `` HTML tag:
```html
```
Or with npm
```js
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
```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](https://github.com/Johann-S/bs-stepper/blob/master/tests/index.html).
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:
```js
{
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.
```js
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.
```js
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:
```js
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](https://github.com/Johann-S/bs-stepper/blob/master/tests/browsers.js).
## Support me
If you want to thank me or support my work:
- You can become my [Patron](https://www.patreon.com/jservoire)
- Or buy me a coffee: [PayPal](https://www.paypal.me/jservoire)
## Thanks
[](https://www.browserstack.com/)
Thanks to [BrowserStack](https://www.browserstack.com/) for providing the infrastructure that allows us to test in real browsers!
## License
[MIT](https://github.com/Johann-S/bs-stepper/blob/master/LICENSE)