All Components

Ripple Overview

The Ripple directive provides the Material ink ripple effect for the Kendo UI components for Angular and is fully compatible with all available Kendo UI themes.

The effect gets applied to all components that are located inside the kendoRippleContainer element.

Basic Usage

The following example demonstrates how to use the Ripple container element and add the ripple effect to buttons.

@Component({
    selector: 'my-app',
    template: `
        <div class="example-wrapper">

            <div kendoRippleContainer> <!-- You can apply this directive to any container element -->

                <div class="row">
                    <div class="col-xs-12 col-sm-4 example-col">
                        <p>Ripple on Buttons</p>
                        <button class="k-button">Default Button</button><br />
                        <button class="k-button k-primary">Primary Button</button><br />
                        <button class="k-button k-bare">Bare Button</button>
                    </div>
                    <div class="col-xs-12 col-sm-4 example-col">
                        <p>Ripple on Checkboxes</p>
                        <p style="line-height: 2.5em;">
                            <input type="checkbox" id="c1" class="k-checkbox" />
                            <label class="k-checkbox-label" for="c1">Checkbox 1</label><br/>
                            <input type="checkbox" id="c2" class="k-checkbox" />
                            <label class="k-checkbox-label" for="c2">Checkbox 2</label><br/>
                            <input type="checkbox" id="c3" class="k-checkbox" />
                            <label class="k-checkbox-label" for="c3">Checkbox 3</label>
                        </p>
                    </div>
                    <div class="col-xs-12 col-sm-4 example-col">
                        <p>Ripple on Radio Buttons</p>
                        <p style="line-height: 2.5em;">
                            <input type="radio" id="r1" name="rg" class="k-radio" checked />
                            <label class="k-radio-label" for="r1">Radio 1</label><br />
                            <input type="radio" id="r2" name="rg" class="k-radio" />
                            <label class="k-radio-label" for="r2">Radio 2</label><br />
                            <input type="radio" id="r3" name="rg" class="k-radio" />
                            <label class="k-radio-label" for="r3">Radio 3</label>
                        </p>
                    </div>
                </div>

            </div>

        </div>
    `,
    styles: [`
        button, input {
          margin: 1em 0;
        }
    `]
})
class AppComponent {
}

Installation

  1. Download and install the package:

    npm install --save @progress/kendo-angular-ripple
  2. Once installed, import the RippleModule in your application root module:

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { RippleModule } from '@progress/kendo-angular-ripple';
    import { AppComponent } from './app.component';
    
    @NgModule({
       bootstrap:    [AppComponent],
       declarations: [AppComponent],
       imports:      [BrowserModule, BrowserAnimationsModule, RippleModule]
    })
    export class AppModule {
    }

Dependencies

The Ripple package requires you to install the following peer dependencies in your application:

  • @angular/common
  • @angular/core
  • rxjs
In this article