Material Design Stepper Add-on

Walk your user through a process consisting of multiple steps

View larger

Close

View larger

Close

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

• Author Homepage
• Online Demo
• Issue Tracker
• Source Code

Compatibility