Basic Usage

Loading Demo...

EXAMPLE
VIEW SOURCE
Edit in Kendo UI Dojo
Change Theme
Default
SASS

LESS
- Default
- Bootstrap
- Material
- Launch Theme Builder
- Black
- Blue Opal
- Bootstrap v3
- Default
- Fiori
- Flat
- High Contrast
- Material
- Material Black
- Metro
- Metro Black
- Moonlight
- Nova
- Office 365
- Silver
- Uniform

index.html

Also available for:

Information

In order to preview the example, make sure that the "Sass Material" theme is selected from the "Change Theme" menu in the top-right corner of the demo page.

Ripple on Buttons

Ripple on Checkboxes

Checkbox 1
Checkbox 2
Checkbox 3

Ripple on Radio Buttons

Radio 1
Radio 2
Radio 3

Ripple on List Items

$(document).ready(function () { $("#optional").kendoListBox({ connectWith: "selected", toolbar: { tools: ["moveUp", "moveDown", "transferTo", "transferFrom", "transferAllTo", "transferAllFrom", "remove"] } }); $("#selected").kendoListBox(); // Initialize ripple container if (selectedTheme == "material-v2") { $(".itmes").kendoRippleContainer(); $(".demo-section").show(); } else { $(".demo-section").hide(); } }); .itmes { width: 100%; float: left; margin-bottom: 30px; } .itmes button, .itmes input { margin: 1em 0; } .itmes > .row-box { float: left; width: 30%; } .itmes .k-listbox { width: 236px; height: 310px; } .itmes .k-listbox:first-of-type { width: 270px; margin-right: 1px; }

The Ripple Container component is part of Kendo UI for jQuery, a professional grade UI library with 100+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Download Free Trial

Description

The Kendo UI RippleContainer provides the Material ink ripple effect for the Kendo UI components and is compatible only with the Sass-based Material Theme. In order to preview the example, make sure that the "Sass Material" theme is selected from the "Change Theme" menu in the top-right corner of the demo page.

Was this demo helpful?

YES NO

Tell us how we can improve this demo

Submit Skip