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 effect gets applied to all components that are located inside the RippleContainer element.

Getting Started

Initialize the RippleContainer

To initialize the RippleContainer, use the following example.

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

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

Configuration

Elements

By default, the RippleContainer configures the ripple effect to be shown on all supported elements:

  • Buttons
  • Checkboxes
  • Radio Buttons
  • List Items

When the elements options is configured, the ripple effect will show only on 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 via jQuery.data(). Once done, use the RippleContainer API to control its behavior.

The example below demonstrates how to access an existing ProgressBar instance.

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

See Also

Other articles on Kendo UI RippleContainer:

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