caribouflex / caribou-stepper

caribou-stepper is a stepper elements that follows the material design guidelines, built using Polymer.

<caribou-stepper>

<caribou-stepper> is a Polymer 2 element used to convey progress through numbered steps (Material Design)

This element allow you to add the quantity of step you want. Anything can be inserted into each step.

All the elements can be customized refer to the styling section.

NEW

• Horizontal stepper
• Step validation
• IE11 support
• Step native Required input validation.

Incoming (TODO)

• GITHUB demo pages.
• Bug Fixes
• Mobile stepper

Styling

For the styling check the <caribou-stepper>, <caribou-step> and <caribou-step-action-buttons>

Usage

<caribou-stepper linear open-first-step-on-startup>
	<caribou-step label="Step 1" open-first-step-on-startup>
  		<paper-input always-float-label label="Surname 1"></paper-input>
      	<paper-input label="Username 1">
        	<iron-icon icon="mail" slot="prefix"></iron-icon>
        	<div slot="suffix">@email.com</div>
      	</paper-input>
  	</caribou-step>
    <caribou-step label="Step 2" open-first-step-on-startup>
  		<paper-input always-float-label label="Surname 2"></paper-input>
      	<paper-input label="Username 2">
        	<iron-icon icon="mail" slot="prefix"></iron-icon>
        	<div slot="suffix">@email.com</div>
      	</paper-input>
  	</caribou-step>
    <caribou-step label="Step 3" open-first-step-on-startup>
  		<paper-input always-float-label label="Surname 3"></paper-input>
      	<paper-input label="Username 3">
        	<iron-icon icon="mail" slot="prefix"></iron-icon>
        	<div slot="suffix">@email.com</div>
      	</paper-input>
  	</caribou-step>
</caribou-stepper>

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

License

Apache License 2.0