Getting Started with the RippleContainer
This guide demonstrates how to get up and running with the Kendo UI for jQuery RippleContainer.
After the completion of this guide, you will achieve the following end result:
<div id="ripple">
<button class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base">Default Button</button>
</div>
<script>
$(document).ready(function(){
$("#ripple").kendoRippleContainer();
});
</script>
1. Create a Div Element
First, create a <div> element.
<div id="ripple"></div>
2. Initialize the RippleContainer
In this step, initialize the RippleContainer component from the <div> element that you created earlier.
$(document).ready(function(){
$("#ripple").kendoRippleContainer();
});
3. Add Elements in the Container
Next, set the contents of the RippleContainer. The ripple effect will be applied to all the elements inside the component.
<div id="ripple">
<button class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base">Default Button</button>
</div>
<script>
$(document).ready(function(){
$("#ripple").kendoRippleContainer();
});
</script>