paper-ripple

Add the infamous ripple effect to any component you like

The ripple is useful if you need to make areas of your content visually clickable by giving the user feedback when it is clicked.

The paper-ripple component itself is rather low level, but for convenience there are three basic Components included to make the usage easy:

• PaperRippleDiv
• PaperRippleHorizontalLayout
• PaperRippleVerticalLayout

Sample code

@Route("")
public class DemoView extends VerticalLayout {

    public DemoView() {
        PaperRippleDiv div = new PaperRippleDiv();
        div.getElement().getStyle()
                .set("border", "1px solid black")
                .set("width", "300px")
                .set("height", "50px");
        div.addClickListener(clickEvent -> {/* Div was clicked */});
        
        PaperRippleHorizontalLayout hl = new PaperRippleHorizontalLayout();
        hl.getElement().getStyle()
                .set("border", "1px solid black")
                .set("width", "300px")
                .set("height", "50px");
        hl.addClickListener(clickEvent -> {/* HorizontalLayout was clicked */});

        PaperRippleVerticalLayout vl = new PaperRippleVerticalLayout();
        vl.getElement().getStyle()
                .set("border", "1px solid black")
                .set("width", "300px")
                .set("height", "50px");
        vl.addClickListener(clickEvent -> {/* VerticalLayout was clicked */});

        add(div,hl,vl);
        setAlignItems(Alignment.CENTER);
    }
}

Links

• Source Code
• Issue tracker
• Online Demo

Compatibility