RippleContainer Overview

The Kendo UI RippleContainer widget provides the Material ink ripple effect for the Kendo UI components and is compatible only with the Sass-based Material Theme.

The ripple effect is applied to all components that are located inside the RippleContainer element.

Getting Started

Initialize the RippleContainer

The following example demonstrates how to initialize the RippleContainer.

    <div id="example">
        <button class="k-button">Default Button</button>
    </div>

    <script>
      $(document).ready(function(){
         $("#example").kendoRippleContainer();
      });
    </script>

Configuration

Elements

By default, the RippleContainer renders the ripple effect to all supported elements:

  • Buttons
  • Checkboxes
  • Radio buttons
  • List items

When the elements option is configured, the ripple effect will be displayed only for the specified elements.

    <div id="container">
        <p>Ripple on Buttons</p>
        <button class="k-button">Default Button</button><br />
    </div>
    <script>
        $("#container").kendoRippleContainer({
            elements: [
                { selector: ".k-button:not(li)" }
            ]
        });
    </script>

Reference

Existing Instances

Make a reference to an existing RippleContainer instance through jQuery.data(). Once done, use the RippleContainer API to control its behavior.

The following example demonstrates how to access an existing RippleContainer instance.

var ripple = $("#container").data("kendoRippleContainer");

See Also

In this article
Not finding the help you need? Improve this article