Materialize Stepper

A small plugin that implements a stepper to Materializecss framework
GitHub version
GETTING STARTED

A stepper is a fundamental part of material design guidelines. It makes forms simplier and a lot of other stuffs.

Unfortunately, one of the best material design front-end frameworks we have today, Materilizecss, doesn't have an implemented stepper. So I decided to create one.

Here you going to find some demos and some code, but you can find the full documentation on GitHub.

I hope you like and help me improve it.

PREREQUISITES

Since it's an implementation to Materializecss framework, you'll need it. If you want the stepper to verify required inputs, you'll need jQuery Validation Plugin, but it's optional since 2.0.1:

  • jQuery (obviously)
  • Materializecss framework
  • Google Material Icons
  • jQuery Validation Plugin (optional)
INSTALLING

You just need to import the .css and the .js files after you import the prerequisites listed above:


 <!-- Materializecss compiled and minified CSS -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
 <!--Import Google Icon Font-->
 <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 <!--Import Materialize-Stepper CSS -->
 <link rel="stylesheet" href="materialize-stepper.min.css">

 <!-- jQuery -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
 <!-- Materializecss compiled and minified JavaScript -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
 <!-- jQueryValidation Plugin (optional) -->
 <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script>
 <!--Import Materialize-Stepper JavaScript -->
 <script src="materialize-stepper.min.js"></script>
                        
Linear Stepper
  • Step 1
  • Step 2
  • Step 3
    Finish!

Linear Stepper is the most common one. In it, you can't navigate freely between steps. It's step by step, obeying the validation ruled by the required inputs (if you're using jQuery Validation Plugin).

Example:


<ul class="stepper linear">...</ul>
                        
Non-Linear Stepper
  • Step 1
  • Step 2
  • Step 3
    Finish!

In the Non-Linear Stepper you can navigate freely between steps. You can also use the buttons for validation (if you're using jQuery Validation Plugin), but if the user wants to move arbitrarily around the steps, it's allowed by clicking on the steps instead of the buttons.

Example:


<ul class="stepper">...</ul>
                        
Parallel Stepper
  • Step 1
  • Step 2
  • Step 3
    Finish!

The parallel stepper is best of both worlds. You get to navigate freely through your stepper, but with continuous validation. Parallel behaves the same as the Non-Linear Stepper, but when opening a step all previous steps are validated by both custom validation (if present) as well as regular validation (if you're using the jQuery Validation Plugin).

Example:


<ul class="stepper parallel">...</ul>
                        
Horizontal Stepper

There is a horizontal version now (since 2.0). All the options above listed is working with it. And since version 2.1 horizontal steppers are responsive and turns to vertical from 992px (width) down:

To use it, you just need to add a ".horizontal" class to your primary "ul" tag:

Example:


<ul class="stepper horizontal">
   ...
</ul>
                        
  • Step 1
  • Step 2
  • Step 3
    Finish!
Feedback Step
  • Step 1
  • Step 2
  • Step 3
    Finish!

If you want, for example, to check if an e-mail exists in your DB, you can define a feedback function with data-feedback attribute in your next button.

When the user try to move forward, a loading screen will overlay the active step until you trigger .nextStep manually.

Example:


<script>
$(selector).nextStep();
</script>
                        
Custom Validation Step
  • Step 1
  • Step 2
  • Step 3
    Finish!

This functionality is mainly focused when using the Parallel Stepper. When previous steps are validated you might want to add your own custom validation if jQuery Validation doesn´t suffice.

By adding the 'data-validator' HTML tag the given function will be executed and is expected to return a boolean value. If the value is not boolean, unexpected behaviour is most likely to occur.

Tip: If you are planning on using both the Custom Validation and Feedback, use the Custom Validation function to validate and the Feedback function to invoke the nextStep behaviour.

For a more elaborate example please refer to Parallel Stepper Example

Example:


<button class="waves-effect waves-dark btn blue next-step" data-validator="someOtherFunction">
   CONTINUE
</button>
                        
Changelog

To get the change log, visit CHANGELOG.md page.
Ps: date format: d/m/y

Credits

Stepper is a plugin created by me, Igor Marcossi, inspired in MDL Stepper, a more powerful one that implements the same thing on Material Design Lite framework.