Directory

Driver component

DriverJS for Vaadin 17+ based on lit element

View larger

Close

View larger

Close

This is a vaadin component of driver js

checkout https://github.com/kamranahmedse/driver.js

Sample code

        HorizontalLayout titleBox = new HorizontalLayout();
        titleBox.setAlignItems(Alignment.BASELINE);
        H3 title = new H3("Vaadin Driver JS, ported to Vaadin v17");
        title.setId("title-id");
        titleBox.add(title, sourceLink);
        add(titleBox);

        Label label = new Label("A label :)");
        label.setWidth("100px");
        add(label);

        Label anotherline = new Label("Another label ;)");
        anotherline.setWidth("100px");
        add(anotherline);

        driver = new DriverJS();
        driver.setStepDefinitions(StepDefinitionBuilder.ofComponent(title)
                .withTitle("Title for the Popover").withDescription("Description for it"),
                StepDefinitionBuilder.ofComponent(label).withTitle("This the first label"),
                StepDefinitionBuilder.ofComponent(anotherline)
                .withTitle("las one!").withPosition(StepPosition.RIGHT));

        sliderValue = new Button("Open driver tour");
        sliderValue.addClickListener(e -> driver.start());

        add(sliderValue);

        add(driver);

Links

• Online Demo
• View on GitHub

Compatibility