johann-s / bs-stepper Goto Github PK

View Code? Open in Web Editor NEW

436.0 12.0 90.0 2.16 MB

A stepper for Bootstrap 4.x

Home Page: https://johann-s.github.io/bs-stepper/

License: MIT License

CSS 6.19% HTML 17.98% JavaScript 75.83%

bootstrap bootstrap4 bootstrap-4 stepper vanilla-js vanillajs vanilla-javascript css3 css

bs-stepper's Introduction

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
How to use it
Methods
Events
Compatibility
Support me
Thanks
License

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-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()

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:

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's People

Contributors

Stargazers

Watchers

Forkers

lausselloic oleteacher iqbalaqaba kstratis caseydev ondrong ioxua jrmypttrsn maddybudi jelondono googlebe akhilpgeorge haikalm lisazz yunyutseng valenzsa mvnmin dotmarn ideabrian shirodkarpushkar abdiiwan1841 dacster13 ranobe ronaklalwaniii s-verkashanskiy luk-s12 rachelnaweb hakeemster fsclaro gdzhv200 felipedevargas haqi-robani bruce0615 arthuryil nelero eakcantey jannyais bobt2018 y2737924daohegua debora7376 poncicando nadnadou athrey-navda kenny201 abdelkalek informasigo xandrules cherryrose09 anzrz-inc sensenarioit donalfenwick securecloud-biz sterben-universe josafaorrico ahmadbudiu pawandiwakar hasan9th farizfadian priyankakhalipe thephosphorus davidweiwei eduedsky dsouzaaf kakopappa gscolaro davecs1 bikulova anthonyliriano isumof fahmi277 jdaniel0305 vbalsamello yackeline16 memdufaizan oneluiz samkb420 martmbithi ashutshm778 bizantl amedghrairi shafayetnuralam souzathalez gtechsltn super-kenil ignatius-n

bs-stepper's Issues

rtl support

How can I use RTL ?

Error on initializing stepper

I'm getting error "Cannot read property 'classlist' of null" on the line that creates a stepper instance. My code is:

$(document).ready(function () {
    var stepper = new Stepper($('.bs-stepper')[0])
})

There is a div with class bs-stepper on the page. The stepper is within a bootstrap modal in case that matters.

bs-stepper can't show first content

I have content fade active dstepper-none dstepper-block these classes in the first step content element.

Why dstepper-none class can't be removed.

Enter and leave step events

First of all let me state that bs-stepper is awesome so far!
This issue is about a future improvement. Call it a feature request if you like.

So, one of the few "inconveniences" I faced with bs-stepper came from the fact that there is currently no support for events.

Imagine a scenario where a user clicks around using a non-linear stepper but on every step change the system needs to perform a number of tasks before actually navigating on to the next step. For example clicking on a new step may require validating some form fields first and if a truthy value was returned the stepper would carry one or otherwise it would abort the action.

I don't believe that there is currently any way to do that so leaveStep(before navigation) and showStep(after navigation) events would be our best friends in this case.

Thanks for taking the time to read this. Best.

Docs not working, missing files

Thought you may like to know that your docs example is broken and seem to be missing the main.js.

There is no /dist folder?

Cheers!

Navigation between steppers

For example, i have 2 steppers on 2 different pages. is there a way to navigate to i.e page 1 stepperForm(2) from page 2 ?

Validation

Hi,

What solutions do you recommend for the validation of the form ?

vertical alignment not working

Hello,

Thanks a lot for your library!
For the sample code below, the vertical alignment of the labels is not working properly: instead of appearing at the same level of the "steps", they are above where they should be.
It's like their height is fixed and the more steps you "next", the more distant they get from the step where you are in.

<!doctype html>
<html lang="it">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>test</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="bootstrap.min.css">
	<link rel="stylesheet" href="bs-stepper.min.css">
    <style>
    	body {font-size: 0.9rem;}
	</style>
	
    <script src="jquery-3.3.1.min.js"></script>
    <script src="bootstrap.min.js"></script>
    
  </head>
  <body>
    <div class="container-fluid">
      <div class="row clearfix">
    	<div class="col-md-12 table-responsive">
          <br>
          <div>
          	<h5>TITLE</h5>
          </div>
        </div>
      </div>
      <div class="row clearfix">
    	<div class="col-md-12 table-responsive">
    		<br>
    		<h5>foo foo foo</h5>
    	</div>
	  </div>
      <div class="row clearfix">
    	<div class="col-md-12 table-responsive">
    		<br>
    		<h5>Do stuff</h5>
			<div id="stepperkey" class="bs-stepper vertical linear">
			  <div class="bs-stepper-header" role="tablist">
				<div class="step active" data-target="#test-vl-1">
				  <button type="button" class="step-trigger" role="tab" id="stepperKeytrigger1" aria-controls="test-vl-1" aria-selected="true">
					<span class="bs-stepper-circle">1</span>
					<span class="bs-stepper-label">Insert password</span>
				  </button>
				</div>
				<div class="bs-stepper-line"></div>
				<div class="step" data-target="#test-vl-2">
				  <button type="button" class="step-trigger" role="tab" id="stepperKeytrigger2" aria-controls="test-vl-2" aria-selected="false" disabled="disabled">
					<span class="bs-stepper-circle">2</span>
					<span class="bs-stepper-label">Do stuff</span>
				  </button>
				</div>
				<div class="bs-stepper-line"></div>
				<div class="step" data-target="#test-vl-3">
				  <button type="button" class="step-trigger" role="tab" id="stepperKeytrigger3" aria-controls="test-vl-3" aria-selected="false" disabled="disabled">
					<span class="bs-stepper-circle">3</span>
					<span class="bs-stepper-label">Do stuff</span>
				  </button>
				</div>
				<div class="bs-stepper-line"></div>
				<div class="step" data-target="#test-vl-4">
				  <button type="button" class="step-trigger" role="tab" id="stepperKeytrigger4" aria-controls="test-vl-4" aria-selected="false" disabled="disabled">
					<span class="bs-stepper-circle">4</span>
					<span class="bs-stepper-label">Do stuff</span>
				  </button>
				</div>
				<div class="bs-stepper-line"></div>
				<div class="step" data-target="#test-vl-5">
				  <button type="button" class="step-trigger" role="tab" id="stepperKeytrigger5" aria-controls="test-vl-5" aria-selected="false" disabled="disabled">
					<span class="bs-stepper-circle">5</span>
					<span class="bs-stepper-label">Do stuff</span>
				  </button>
				</div>
			  </div>
			  <div class="bs-stepper-content">
				<form onsubmit="return false">
				  <div id="test-vl-1" role="tabpanel" class="bs-stepper-pane fade active dstepper-block" aria-labelledby="stepperKeytrigger1">
					<div class="form-group">
					  <label for="exampleInputPasswordV1">Password</label>
					  <input type="password" class="form-control" id="exampleInputPasswordV1" placeholder="Password">
					</div>
					<button class="btn btn-primary" onclick="stepper.next()">next</button>
				  </div>
				  <div id="test-vl-2" role="tabpanel" class="bs-stepper-pane fade" aria-labelledby="stepperKeytrigger2">
					<button class="btn btn-primary" onclick="stepper.previous()">back</button>
					<button class="btn btn-primary" onclick="stepper.next()">next</button>
				  </div>
				  <div id="test-vl-3" role="tabpanel" class="bs-stepper-pane fade" aria-labelledby="stepperKeytrigger3">
					<button class="btn btn-primary" onclick="stepper.previous()">back</button>
					<button class="btn btn-primary" onclick="stepper.next()">next</button>
				  </div>
				  <div id="test-vl-4" role="tabpanel" class="bs-stepper-pane fade" aria-labelledby="stepperKeytrigger4">
					<button class="btn btn-primary" onclick="stepper.previous()">back</button>
					<button class="btn btn-primary" onclick="stepper.next()">next</button>
				  </div>
				  <div id="test-vl-5" role="tabpanel" class="bs-stepper-pane fade" aria-labelledby="stepperKeytrigger5">
					<button class="btn btn-primary mt-5" onclick="stepper.previous()">back</button>
					<button type="submit" class="btn btn-primary mt-5">next</button>
				  </div>
				</form>
			  </div>
			</div>
		</div>
	</div>
    <script src="bs-stepper.min.js"></script>
    <script>
    	var stepper;
		$(document).ready(function () {
			stepper = new Stepper(document.querySelector('#stepperkey'));
		})
	</script>
  </body>
</html>

Thanks

Add unit test

Something with Karma + Jasmine and Code coverage

Old step is not available in 'show.bs-stepper' event details

Hi. Amazing package.

The 'show' event is cancellable, but only is provided the step that will be 'shown' via event.detail.indexStep. I would like to know the old and next step in this event.

~~I would like to know how to check the current step (before 'shown') in the 'show' event?~~

I am able to use the global stepperInstance._currentIndex as the old value, but... should be nice to have it as event data.

[Question] Does the stepper have a way to color the progress lines as well as the circles?

I'm trying to get the lines to light up with each step, I have a hacky solution but it's not dynamic and it would probably kill kittens.

Thank you.

bs_stepper_1.default is not a constructor

I am trying to use bs-stepper in my angular application. Referred to https://stackblitz.com/edit/bs-stepper-angular?file=src%2Fapp%2Fapp.component.ts
However i get the error related to constructor. Any pointers on how to solve this?

this.stepper.next() Causes the page to reload and again start from first Step

Hi , I have implemented basic Stepper module , but the issue is
when i click on next and it goes from Step 1 to Step 2 the page reloads itself and again it starts from step 1 .
Code 👎
component.ts

import { Component, OnInit } from '@angular/core';
import Stepper from 'bs-stepper';

@Component({
  selector: 'app-data-migration',
  templateUrl: './data-migration.component.html',
  styleUrls: ['./data-migration.component.css']
})
export class DataMigrationComponent implements OnInit {

  name = 'Angular';
  private stepper: Stepper;

  next() {
    this.stepper.next();
  }

  onSubmit() {
    return false;
  }

  constructor() { }

  ngOnInit() {
    this.stepper = new Stepper(document.querySelector('#stepper1'), {
      linear: false,
      animation: true
    })
  }

}

Component.html

<div class="container">
    <!-- <hello name="{{ name }}"></hello> -->
    <div id="stepper1" class="bs-stepper">
      <div class="bs-stepper-header">
        <div class="step" data-target="#test-l-1">
          <button class="step-trigger">
            <span class="bs-stepper-circle">1</span>
            <span class="bs-stepper-label">Email</span>
          </button>
        </div>
        <div class="line"></div>
        <div class="step" data-target="#test-l-2">
          <button class="step-trigger">
            <span class="bs-stepper-circle">2</span>
            <span class="bs-stepper-label">Password</span>
          </button>
        </div>
        <div class="line"></div>
        <div class="step" data-target="#test-l-3">
          <button class="step-trigger">
            <span class="bs-stepper-circle">3</span>
            <span class="bs-stepper-label">Validate</span>
          </button>
        </div>
      </div>
      <div class="bs-stepper-content">
        <form (ngSubmit)="onSubmit()">
          <div id="test-l-1" class="content">
            <div class="form-group">
              <label for="exampleInputEmail1">Email address</label>
              <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email" />
            </div>
            <button (click)="next()" class="btn btn-primary">Next</button>
          </div>
          <div id="test-l-2" class="content">
            <div class="form-group">
              <label for="exampleInputPassword1">Password</label>
              <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" />
            </div>
            <button (click)="next()" class="btn btn-primary">Next</button>
          </div>
          <div id="test-l-3" class="content text-center">
            <button type="submit" class="btn btn-primary mt-5">Submit</button>
          </div>
        </form>
      </div>
    </div>
  </div>

How to use Events to validate with jQuery Validate

How can i use events listener to prevent next step if some field is null or white?

bs-stepper not ssr friendly

we used bs-stepper in our Angular 8 application it worked fine untill we started implementing angular Universal the error is:
var matches = window.Element.prototype.matches;ReferenceError: window is not defined
i tried many things but nothing works. the problem is that the window object doesn't exist on the server and so its not defined when doing server side rendering.
so any idea how to fix this issue or how to make bs-stepper SSR friendly

Change dependabot settings to not automatically rebase PRs

Fit To Parent Div (bs-stepper matrix)

If I have a horizontal stepper and it overflows from my parent container it seems my best option right now is to just throw in a horizontal scrollbar on the parent div.

Is there any way to get the overflow to fit into the parent by dropping down a row (I would like the last step that you need to scroll to, to drop down under the first step and still have a line)? i.e.

Can the individual steps internally have more steps inside them.

I wanted to use this module for my upcoming project, in which the first step has 4 additional steps inside it and then the progress moves towards the second point, Please let me know if this is the fit package to use for the stepper condition or should I look for something else, really appreciate your help on this.

bs-stepper-line above label when inside div

I had to put some headers inside a DIV element to dynamically show/hide them. But when done, the bs-stepper-line element climbs over the label, as the picture below... Someone can help me with this CSS?

<div class="bs-stepper-header" role="tablist">

                    <div class="step" data-target="#escopoAnomalia">
                        <button type="button" class="step-trigger" role="tab" id="trigger1" aria-controls="test-nlf-1">
                            <span class="bs-stepper-circle">
                                <span class="fas fa-align-center" aria-hidden="true"></span>
                            </span>
                            <span class="bs-stepper-label">Escopo da Anomalia</span>
                        </button>
                    </div>

                    <div class="bs-stepper-line"></div>

                    <div class="step" data-target="#dadosAnomalia">
                        <button type="button" class="step-trigger" role="tab" id="trigger2" aria-controls="test-nlf-2">
                            <span class="bs-stepper-circle">
                                <span class="fas fa-book" aria-hidden="true"></span>
                            </span>
                            <span class="bs-stepper-label">Dados da Anomalia</span>
                        </button>
                    </div>

                    <div class="dadosAmbientais">
                        <div class="bs-stepper-line"></div>

                        <div class="step" data-target="#dadosAmbientais">
                            <button type="button" class="step-trigger" role="tab" id="trigger3" aria-controls="test-nlf-3">
                                <span class="bs-stepper-circle">
                                    <span class="fas fa-tree" aria-hidden="true"></span>
                                </span>
                                <span class="bs-stepper-label">Dados Ambientais</span>
                            </button>
                        </div>
                    </div>

                </div>

validation on steps

I have issue about validation on steps. How can I check validation on steps with next buttons?
When I was doing like below, I am getting required errors but when I fill one field it's not showing any mandatory messages.

next(cnt: number) {
this.form.controls.supplierId.markAsDirty(); this.form.controls.asnNo.markAsDirty(); this.form.controls.expectedDate.markAsDirty(); this.form.controls.documentNo.markAsDirty(); this.form.controls.carrierName.markAsDirty(); this.form.controls.carrierTrackNr.markAsDirty(); this.form.markAllAsTouched(); this.form.updateValueAndValidity(); return; }

Better responsive mode for the docs

We should remove that forcing to vertical mode here: https://github.com/Johann-S/bs-stepper/blob/master/docs/js/main.js#L17-L34

And improve the responsiveness of the documentation.

/CC @MartijnCuppens

Uncaught type error in new version

Hi,

Having a few issues with the new update (using the CDN links), where it will not show the body of the stepper. This seems to also be an issue on the demos here. Any ideas?

The error on the demo page (and similar in my code is):

Uncaught TypeError: Cannot read property 'setAttribute' of null
at util.js:33
at Array.forEach ()
at m (util.js:31)
at new t (index.js:34)
at HTMLDocument. (main.js:5)

Nick

Small screens

Hi,
How do you render the stepper header to fit in one line for mobile screens ?
In your demo it renders fine because there are only 3 steps.
Thanks for your help,
Antoine

Add dependabot

Add check mark when a step is validated

At the first i want to thank you for cool library.

I want to ask for implementation of 2 things.

Allow control of stepper via data props on the elements of steps.
Is possible when i'm reaching next steps to have them active too?

Like if i'm on the step 3 then 1,2,3 should be displayed as active too (indicating that i passed them).

Autofocus problem

I have the autofocus attribute set on the first input element of the first tab. When I open the modal containing the stepper, the input is briefly focused but then it disappears. I also tried using jquery .focus() on the shown.bs-stepper listener but that didn't work either.

Is there something in bs-stepper that would prevent autofocus from working correctly?

Fix breaking change

Re allow a tag with button tag and create a CSS class for the element which trigger the change

linear stepper, visual feedback

We shouldn't have an hover effect for non activated steps and we shouldn't change the cursor.

/CC @XhmikosR

Inconsistent labels in vertical stepper

Hi,
First of all thanks for this very versatile stepper.
I am working on a project which requires a number of steps to be implemented (10+). I would like a responsive stepper out of the box, but nevertheless adding the vertical class for smaller screens as of now. But, The stepper labels are inconsistent. Sometimes they appear horizontally in front of the circle, and sometimes below it. Any suggestion on how to make it look even?

Uncaught TypeError: Cannot read property 'classList' of null

Thanks for your plugin.

I don't use bs-stepper with cdn link. I downloaded the files and saved it in my foolder. But I saw an error in the console web. I tried to using jQuery and JS Vanilla, comment that line code, but it doesn't fix. I haven't modified anything more.

Big labels makes screen wider

Hello,

If you change the name of label 1 2 3. The screen gets an scrollX bar.

for eg:
1 > Upload Your Documents
2 > Verify Your Documents
3 > Submit Documents

It works good in desktop but ruins the display in mobile

Any help would be appreciated. Thanks for the amazing plugin

still getting Uncaught TypeError: Cannot read property 'addEventListener' of null at index.js:52

Uncaught TypeError: Cannot read property 'addEventListener' of null
at index.js:52

Although there is a closed ticket but I am still getting it using the latest settings.

next step executes a submit

everytime i hit "Next" button, the form executes a submit action.
My code is:

<form onSubmit="alert('submitted')">

                        <div id="escopoAnomalia" role="tabpanel" class="bs-stepper-pane fade" aria-labelledby="trigger1">
                            <div class="form-group">
                                <label for="exampleInputName2">Name</label>
                                <input type="email" class="form-control" id="exampleInputName2" placeholder="Enter your name">
                            </div>
                            <button class="btn btn-primary" onclick="stepper.next()">Next</button>
                        </div>

                        <div id="test-nlf-2" role="tabpanel" class="bs-stepper-pane fade" aria-labelledby="stepper3trigger2">
                            <div class="form-group">
                                <label for="exampleInpuAddress2">Address</label>
                                <input type="email" class="form-control" id="exampleInpuAddress2" placeholder="Enter your address">
                            </div>
                            <button class="btn btn-primary" onclick="stepper.next()">Next</button>
                        </div>

                        <div id="test-nlf-3" role="tabpanel" class="bs-stepper-pane fade text-center" aria-labelledby="stepper3trigger3">
                            <button type="submit" class="btn btn-primary mt-5">Submit</button>
                        </div>

                    </form>

<script>
        var stepper

        document.addEventListener('DOMContentLoaded', function () {
            stepper = new Stepper(document.querySelector('#rtaWizard'), {
                linear: false,
                animation: true
            })
        })

    </script>

Can we move between steps

I have 22 steps but i want to be able to go back from step 15 to step 4 by creating a link or button in step 15's body. is that doable and how may I go about it?

Important style issues

Since there are rules defined as:

.bs-stepper a

This messes all the links inside the .bs-stepper.

All .bs-stepper a references should be removed and should only target .step-trigger

Uncaught TypeError: this._element.querySelectorAll is not a function

Hello I am getting this
Uncaught TypeError: this._element.querySelectorAll is not a function at new Stepper (index.js:14)
what should I do ?

Uncaught TypeError: Cannot read property 'addEventListener' of null

Error at index.js file at line 51. Which breaks the functioning of the plugin.

Example here

Move to next step

Am facing issues when I try to move to a next step after making a server call using jquery.ajax().

When I call next() or to(stepNo), Stepper enters an infinite loop

if (stepperPan.getAttribute('id') === "third-part"){
        if (!$.trim(email) || !$.trim(password)){
          event.preventDefault();
          form.classList.add('was-validated')
        } else {
            event.preventDefault();
            jQuery.ajax("/business/api/v1/on-boarding", {
                data: $(".bs-stepper-content form").serialize(),
                type: "POST",
                dataType: "json",
                success: function(data) {
                    stepper2.to(4);
                    console.log(data, "Success");
                    $("#verify-email").text(email);

                    // stepper2.next();

                },
                error: function(data) {
                    console.log(data);
                    event.preventDefault();
                    stepper2.previous()
                    form.classList.add('was-validated')
                }
            })
        }
      }

Accessibility

It'll would be awesome if we can make this plugin accessible.

/CC @Lausselloic, and @patrickhlauke if you have time 😄

Use browser stack for cross browser testing

Get an error when using previous method

thanks for your plugin,
I made this component kinda dynamic and I'm passing different components to it to show, but when I try to use previous function to go back I get this error:

ERROR TypeError: Cannot read property 'classList' of null
at bs-stepper.js:111
at Array.forEach ()
at showStep (bs-stepper.js:107)
at Stepper.previous (bs-stepper.js:296)

could you please help me to find out how to resolve this issue?
thanks

Stepper is displayed at step 2

If I open my Bootstrap modal containing my stepper, it is positioned at step 1. If I advance to step 2 then close the modal and open it again, it's displayed with step 2 active, not step 1.

I tried addEventListener for the show.bs-stepper event and issuing stepper.to(1) there, but still no effect. In fact, show.bs-stepper doesn't seem to fire when the stepper is first opened.

How can I make sure the stepper is displayed with step 1 active?

Vertical stepper without fade animation weird behavior

Not the case with the fade animation

Can we hide or disable any step in runtime

I am using this package in Angular 9. I have one requirement like disabled or hide any step based on role. Is that doable and how we can implement this functionality in Angular?

Not entirely responsive

I've implemented a horizontal stepper with 6 steps. When the screen size shrinks, the steps do not stack vertically and, instead, bleed off the page. Am I missing something?

This.stepper.to is not a function

On tab click, bs-stepper is throwing error "this.stepper.to is not a function".
This issue only occurs in the Qa and Production Environment on azure.
I am currently using angular 7 with bs-stepper "version": "1.5.0".
We have applied a temporary fix by setting "build optimizer": false in agular.json.
Please provide a correct solution for it

ANGULAR 7 issues

I'm using this library on my own angular 7 project with 3 reactive forms

so the problem is when I initialized the stepper variable on init hook and call next void in a button to enable the following form the console log throw this error:
ERROR TypeError: Cannot read property 'classList' of null
at bs-stepper.js:135
at Array.filter ()
at showContent (bs-stepper.js:134)
at new Stepper (bs-stepper.js:259)
at RequestComponent.push../src/app/pages/request/request.component.ts.RequestComponent.next (request.component.ts:81)
at Object.eval [as handleEvent] (RequestComponent.html:134)
at handleEvent (core.js:23008)
at callWithDebugContext (core.js:24078)
at Object.debugHandleEvent [as handleEvent] (core.js:23805)
at dispatchEvent (core.js:20457)

COULD YOU HELP ME to solved this?

vertical stepper

is there any way to load the vertical stepper content in the same content pane? I mean,when am clicking the steps each step open in the different content pane (i.e) one by one under each step. i want them to load under same pane.kindly suggest a way.thanks for your help.

Jump to a specific step

What is a non linear stepper ?

bs_stepper_1.default is not a constructor

I get the following error, when i tried use the example to angular.

ERROR TypeError: bs_stepper_1.default is not a constructor at PropostaUpdateComponent.ngOnInit (proposta-update.component.ts?7d8b:68) at checkAndUpdateDirectiveInline (core.js?09c9:19327) at checkAndUpdateNodeInline (core.js?09c9:27585) at checkAndUpdateNode (core.js?09c9:27547) at debugCheckAndUpdateNode (core.js?09c9:28181) at debugCheckDirectivesFn (core.js?09c9:28141) at Object.eval [as updateDirectives] (PropostaUpdateComponent_Host.ngfactory.js? [sm]:1) at Object.debugUpdateDirectives [as updateDirectives] (core.js?09c9:28133) at checkAndUpdateView (core.js?09c9:27529) at callViewAction (core.js?09c9:27770)

johann-s / bs-stepper Goto Github PK

bs-stepper's Introduction

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

bs-stepper's People

Contributors

Stargazers

Watchers

Forkers

bs-stepper's Issues

Recommend Projects

Recommend Topics

Recommend Org