trungdq88 / wizard-steps

Fancy wizard steps element using HTML5 Flexbox

wizard-steps

Fancy wizard steps element using HTML5 Flexbox

About

A JavaScript library by Trung Dinh Quang.

See the project homepage.

Installation

Using Bower:

bower install wizard-steps

Or grab the source (minified).

Usage

Basic usage is as follows:

HTML:

<div id="wizard-steps" class="wizard-steps">
  <div class="wizard-step active">
    One
  </div>
  <div class="wizard-step">
    Two very long long text over here
  </div>
  <div class="wizard-step">
    Three
  </div>
  <div class="wizard-step">
    Four
  </div>
  <div class="wizard-step">
    Five
  </div>
</div>

JavaScript:

WizardStep('#element-id')

How it looks like:

Check /demo page for more information

Documentation

Start with docs/MAIN.md.

TODO

• No more jQuery
• Fix arrow size
• Allow multiple lines for each step item (dynamic height)
• Provide callbacks

Contributing

I welcome all pull requests

License

MIT. See LICENSE.txt in this directory.