Directory

← Back

Material Design Stepper Add-on

Walk your user through a process consisting of multiple steps

Author

Rating

Popularity

100+

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>

Compatibility

(Loading compatibility data...)

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 steps Material Design Stepper Add-on - Vaadin Add-on Directory
Material Design Stepper is a UI component add-on for Vaadin that implements a Stepper following the [Material Design Specification](https://material.io/guidelines/components/steppers.html#). # 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](https://github.com/Juchar/md-stepper) *__Tags:__ Material Design, Stepper, Wizard, Step, Process, Workflow*
Online