Directory

← Back

paper-ripple

Add the infamous ripple effect to any component you like

Author

Rating

Popularity

<100

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);
    }
}

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

  • updated vaadin version
  • allow accessing the components in the related Layouts
  • updated paper-ripple version
  • added material theme support
Released
2020-09-14
Maturity
STABLE
License
Apache License 2.0

Compatibility

Framework
Vaadin 14+
Vaadin 10+ in 1.0
Browser
Firefox
Google Chrome
Microsoft Edge

paper-ripple - Vaadin Add-on Directory

Add the infamous ripple effect to any component you like paper-ripple - Vaadin Add-on Directory
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
Online