docs: add example for ripple (#12063)

src/demo-app/ripple/ripple-demo.html

@@ -1,4 +1,3 @@
-<!-- Use <mat-card>? -->
 <div class="demo-ripple">
   <section>
     <mat-checkbox [(ngModel)]="disableButtonRipples">Disable button ripples</mat-checkbox>
@@ -12,48 +11,7 @@
     </button>
   </section>
 
-  <section>
-    <div class="demo-ripple-checkbox-option"><mat-checkbox [(ngModel)]="centered">Centered</mat-checkbox></div>
-    <div class="demo-ripple-checkbox-option"><mat-checkbox [(ngModel)]="unbounded">Unbounded</mat-checkbox></div>
-    <div class="demo-ripple-checkbox-option"><mat-checkbox [(ngModel)]="disabled">Disabled</mat-checkbox></div>
-    <div class="demo-ripple-checkbox-option"><mat-checkbox [(ngModel)]="rounded">Rounded container (flaky in Firefox)</mat-checkbox></div>
-  </section>
-  <section>
-    Speed
-    <mat-radio-group [(ngModel)]="rippleSpeed">
-      <mat-radio-button name="demo-ripple-options" value="0.4">Slow</mat-radio-button>
-      <mat-radio-button name="demo-ripple-options" value="1">Normal</mat-radio-button>
-      <mat-radio-button name="demo-ripple-options" value="2">Fast</mat-radio-button>
-    </mat-radio-group>
-  </section>
-  <section>
-    <mat-form-field>
-      <mat-label>Ripple radius</mat-label>
-      <input matInput aria-label="radius" [(ngModel)]="radius">
-    </mat-form-field>
-    <mat-form-field>
-      <mat-label>Ripple color</mat-label>
-      <input matInput aria-label="color" [(ngModel)]="rippleColor">
-    </mat-form-field>
-  </section>
-  <section>
-    <button mat-raised-button (click)="launchRipple()" disableRipple>Launch Ripple</button>
-    <button mat-raised-button (click)="launchRipple(true)" disableRipple>Launch Ripple (Persistent)</button>
-    <button mat-raised-button (click)="launchRipple(true, true)" disableRipple>Launch Ripple (No Animation)</button>
-    <button mat-raised-button (click)="fadeOutAll()" disableRipple>Fade Out All</button>
-  </section>
-  <section>
-    <div class="demo-ripple-container"
-        [class.demo-ripple-disabled]="disabled"
-        [class.demo-ripple-rounded]="rounded"
-        mat-ripple
-        [matRippleCentered]="centered"
-        [matRippleDisabled]="disabled"
-        [matRippleUnbounded]="unbounded"
-        [matRippleRadius]="radius"
-        [matRippleColor]="rippleColor"
-        [matRippleSpeedFactor]="rippleSpeed">
-      Click me
-    </div>
-  </section>
+  <hr>
+
+  <material-example id="ripple-overview"></material-example>
 </div>

src/demo-app/ripple/ripple-demo.scss

@@ -5,36 +5,4 @@
     margin: 8px;
     text-transform: uppercase;
   }
-
-  .demo-ripple-container {
-    box-shadow: rgba(0, 0, 0, 0.118) 0 10px 15px, rgba(0, 0, 0, 0.239) 0 5px 10px;
-    cursor: pointer;
-    font-size: 24px;
-    height: 150px;
-    line-height: 150px;
-    position: relative;
-    text-align: center;
-    transition: all 200ms linear;
-    width: 200px;
-
-    // Disable the blue overlay on touch. This makes it easier to see ripples fading in.
-    -webkit-tap-highlight-color: transparent;
-    @include user-select(none);
-
-    &.demo-ripple-disabled {
-      color: rgba(32, 32, 32, 0.4);
-    }
-
-    &.demo-ripple-rounded {
-      border-radius: 50%;
-      overflow: hidden;
-      // z-index needed to make clipping to border-radius work correctly.
-      // http://stackoverflow.com/questions/20001515/
-      z-index: 1;
-    }
-  }
-
-  .demo-ripple-checkbox-option {
-    margin: 10px 0;
-  }
 }

src/material-examples/ripple-overview/ripple-overview-example.css

@@ -0,0 +1,20 @@
+.example-ripple-container {
+  /** Necessary until: https://github.com/angular/material2/pull/11913*/
+  position: relative;
+
+  cursor: pointer;
+  text-align: center;
+
+  width: 300px;
+  height: 300px;
+  line-height: 300px;
+}
+
+/** Styles to make the demo look better. */
+.example-ripple-checkbox {
+  margin: 6px 12px 6px 0;
+}
+
+.example-ripple-form-field {
+  margin: 0 12px 0 0;
+}

src/material-examples/ripple-overview/ripple-overview-example.html

@@ -0,0 +1,21 @@
+<mat-checkbox [(ngModel)]="centered" class="example-ripple-checkbox">Centered</mat-checkbox>
+<mat-checkbox [(ngModel)]="disabled" class="example-ripple-checkbox">Disabled</mat-checkbox>
+<mat-checkbox [(ngModel)]="unbounded" class="example-ripple-checkbox">Unbounded</mat-checkbox>
+
+<mat-form-field class="example-ripple-form-field">
+  <input matInput [(ngModel)]="radius" type="number" placeholder="Radius">
+</mat-form-field>
+<mat-form-field class="example-ripple-form-field">
+  <input matInput [(ngModel)]="color" type="text" placeholder="Color">
+</mat-form-field>
+
+
+<div class="example-ripple-container mat-elevation-z4"
+     matRipple
+     [matRippleCentered]="centered"
+     [matRippleDisabled]="disabled"
+     [matRippleUnbounded]="unbounded"
+     [matRippleRadius]="radius"
+     [matRippleColor]="color">
+  Click me
+</div>

src/material-examples/ripple-overview/ripple-overview-example.ts

@@ -0,0 +1,18 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title MatRipple basic usage
+ */
+@Component({
+  selector: 'ripple-overview-example',
+  templateUrl: 'ripple-overview-example.html',
+  styleUrls: ['ripple-overview-example.css'],
+})
+export class RippleOverviewExample {
+  centered = false;
+  disabled = false;
+  unbounded = false;
+
+  radius: number;
+  color: string;
+}