Ripple

Ripples are state layers used to communicate the status of a component or interactive element.

A state layer is a semi-transparent covering on an element that indicates its state. A layer can be applied to an entire element or in a circular shape.

• Mixes: InternalsAttached
• Mixes: Attachable

Interactive Demo

<div class="container" id="touch">
  <div class="anchor">
    <md-ripple for="touch" class="unbounded"></md-ripple>
  </div>
</div>

Usage

Ripples display on press pointer interactions. They may be attached to a control in one of three ways.

1. Attached to the parent element

   <button style="position: relative">
     <md-ripple></md-ripple>
     Button
   </button>
   

2. Attached to a referenced element

   <div style="position: relative">
     <md-ripple for="ripple-control-input" enterbehavior="none" spacebehavior="none"></md-ripple>
     <input id="ripple-control-input" />
   </div>
   

3. Attached imperatively

   <div style="position: relative">
     <md-ripple id="ripple"></md-ripple>
     <br />
     <button id="ripple-control">Button</button>
     <br />
     <br />
   </div>
   <script>
     const ripple = document.querySelector('#ripple');
     const control = document.querySelector('#ripple-control');
     onload = () => ripple.attach(control);
   </script>
   

Note: ripples must be placed within a position: relative container.

Properties

Methods