<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.
- Horizontal stepper
- Step validation
- IE11 support
- Step native Required input validation.
- GITHUB demo pages.
- Bug Fixes
- Mobile stepper
For the styling check the <caribou-stepper>, <caribou-step> and <caribou-step-action-buttons>
<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>- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -am 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request :D
Apache License 2.0
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent