Material Design Stepper Add-on
Walk your user through a process consisting of multiple steps
Material Design Stepper is a UI component add-on for Vaadin that implements a Stepper following the Material Design Specification.
Features
- Horizontal & Vertical Stepper
- Linearity
- Feedback
- Validation
- Custom Step Icons
- Optional, Editable, Cancellable & Resettable Steps
- Events for Step/Stepper
- Declarative Support
To see the various features in action see the demo.
ATTENTION:
Unfortunately I can't enable @Push
out of unknown reasons on the demo using heroku as hoster. This means that the feedback on step 3 will be shown forever. Please just refresh the page once you have seen it.
To see the full, detailed documentation please go to:
https://github.com/Juchar/md-stepper
Tags: Material Design, Stepper, Wizard, Step, Process, Workflow
Sample code
Step step1 = new Step(true, "Caption", "Description", new Label("Content")); Step step2 = new StepBuilder() .withDefaultActions(true) .withCaption("Caption") .withDescription("Description") .withContent(new Label("Content")) .build(); HorizontalStepper stepper = new HorizontalStepper(Arrays.asList(step1, step2), false); stepper.setSizeFull(); stepper.start(); addComponent(stepper);
<vaadin-vertical-layout width="100%" height="100%"> <my-horizontal-stepper _id="stepper" linear divider-expand-ratio="0.75" width="1000px" height="500px" :middle :center> <my-step caption="Step Caption 1" description="Step Description 1" optional editable cancellable default-actions> <content> <v-vertical-layout width="100%" spacing> <v-label style-name="h2"> Declarative Support </v-label> <v-label> The stepper also supports reading & writing declarative layouts. You can set attributes of the stepper itself (e.g. linear) as well as define the single steps (including content & buttons customization). </v-label> </v-vertical-layout> </content> <buttons> <v-button step-action="skip">Skip</v-button> <v-button style-name="primary" step-action="next">Finish</v-button> <v-button style-name="danger" step-action="cancel">Cancel</v-button> </buttons> </my-step> </my-horizontal-stepper> </vaadin-vertical-layout>
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Added possibility to reset steps if a editable step is resubmitted.
- Released
- 2017-08-01
- Maturity
- BETA
- License
- Apache License 2.0
Compatibility
- Framework
- Vaadin 8.0+
- Vaadin 7.7+ in 1.0
- Browser
- Firefox
- Google Chrome
- Internet Explorer
Material Design Stepper Add-on - Vaadin Add-on Directory
Walk your user through a process consisting of multiple stepsOnline Demo
Issue Tracker
Source Code
Material Design Stepper Add-on version 1.0
Initial Release
Material Design Stepper Add-on version 2.0
Initial Release for Vaadin 8
Material Design Stepper Add-on version 1.1
Fix for step active listener called on changing the feedback message.
Material Design Stepper Add-on version 2.1
Fix for step active listener called on changing the feedback message.
Material Design Stepper Add-on version 1.2
Added possibility to reset steps if a editable step is resubmitted.
Material Design Stepper Add-on version 2.2
Added possibility to reset steps if a editable step is resubmitted.