← Back

Timeu-wizard component

vaadin-timeu-wizard component for Vaadin 17

Author

Rating

Popularity

100+

Integration of timeu-wizard component for Vaadin 17 The vaadin-timeu-wizard element displaying the progress of a wizard as a series of connected circles. By default the step number is displayed inside the circle and if provided a label below. The available steps are provided by either as an array of Objects or an array of Strings.

Sample code

        HorizontalLayout wizardLine = new HorizontalLayout();
        TimeuWizard wizard = new TimeuWizard(List.of("Step 1","Step 2","Step 3","Step 4","Step 5"), 1);
        wizard.addClassName("wizardsConfig");
        wizard.addValueChangeListener(e -> {
            Integer value = e.getValue();
            wizardValue.setText("Wizard value: "+value);
            });
        HorizontalLayout buttonsLine = new HorizontalLayout();
        Button previousButton = new Button("Previous");        
        previousButton.addClickListener(e -> wizard.previous());        
        Button nextButton = new Button("Next");
        nextButton.addClickListener(e -> wizard.next());
        buttonsLine.add(previousButton, nextButton);
        wizardLine.add(wizard, wizardValue);
        add(wizardLine);