Components / Ripple

Getting Started with the Kendo UI for Angular Ripple

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

Either use the quick setup (Angular CLI v6 or later) or manually add the package (Angular CLI v5 or earlier).

Quick Setup with Angular CLI v6 or Later

Angular CLI v6 supports the addition of packages through the ng add command which executes in one step the set of otherwise individually needed commands.

ng add @progress/kendo-angular-ripple

Manual Setup

  1. Download and install the package.

    npm install --save @progress/kendo-angular-ripple @progress/kendo-angular-common

  2. Once installed, import the RippleModule in your application root or feature 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
  • @progress/kendo-angular-common
  • rxjs

In this article