Skip to content

Commit 4381a96

Browse files
devversiondevversion
committed
chore: add example for ripple
* Moves the ripple demo into a more bare-bone example that can shown in the docs at some point. References #7543
1 parent 89cad3f commit 4381a96

File tree

5 files changed

+62
-77
lines changed

5 files changed

+62
-77
lines changed

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

Lines changed: 3 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
<!-- Use <mat-card>? -->
21
<div class="demo-ripple">
32
<section>
43
<mat-checkbox [(ngModel)]="disableButtonRipples">Disable button ripples</mat-checkbox>
@@ -12,48 +11,7 @@
1211
</button>
1312
</section>
1413

15-
<section>
16-
<div class="demo-ripple-checkbox-option"><mat-checkbox [(ngModel)]="centered">Centered</mat-checkbox></div>
17-
<div class="demo-ripple-checkbox-option"><mat-checkbox [(ngModel)]="unbounded">Unbounded</mat-checkbox></div>
18-
<div class="demo-ripple-checkbox-option"><mat-checkbox [(ngModel)]="disabled">Disabled</mat-checkbox></div>
19-
<div class="demo-ripple-checkbox-option"><mat-checkbox [(ngModel)]="rounded">Rounded container (flaky in Firefox)</mat-checkbox></div>
20-
</section>
21-
<section>
22-
Speed
23-
<mat-radio-group [(ngModel)]="rippleSpeed">
24-
<mat-radio-button name="demo-ripple-options" value="0.4">Slow</mat-radio-button>
25-
<mat-radio-button name="demo-ripple-options" value="1">Normal</mat-radio-button>
26-
<mat-radio-button name="demo-ripple-options" value="2">Fast</mat-radio-button>
27-
</mat-radio-group>
28-
</section>
29-
<section>
30-
<mat-form-field>
31-
<mat-label>Ripple radius</mat-label>
32-
<input matInput aria-label="radius" [(ngModel)]="radius">
33-
</mat-form-field>
34-
<mat-form-field>
35-
<mat-label>Ripple color</mat-label>
36-
<input matInput aria-label="color" [(ngModel)]="rippleColor">
37-
</mat-form-field>
38-
</section>
39-
<section>
40-
<button mat-raised-button (click)="launchRipple()" disableRipple>Launch Ripple</button>
41-
<button mat-raised-button (click)="launchRipple(true)" disableRipple>Launch Ripple (Persistent)</button>
42-
<button mat-raised-button (click)="launchRipple(true, true)" disableRipple>Launch Ripple (No Animation)</button>
43-
<button mat-raised-button (click)="fadeOutAll()" disableRipple>Fade Out All</button>
44-
</section>
45-
<section>
46-
<div class="demo-ripple-container"
47-
[class.demo-ripple-disabled]="disabled"
48-
[class.demo-ripple-rounded]="rounded"
49-
mat-ripple
50-
[matRippleCentered]="centered"
51-
[matRippleDisabled]="disabled"
52-
[matRippleUnbounded]="unbounded"
53-
[matRippleRadius]="radius"
54-
[matRippleColor]="rippleColor"
55-
[matRippleSpeedFactor]="rippleSpeed">
56-
Click me
57-
</div>
58-
</section>
14+
<hr>
15+
16+
<material-example id="ripple-overview"></material-example>
5917
</div>

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

Lines changed: 0 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -5,36 +5,4 @@
55
margin: 8px;
66
text-transform: uppercase;
77
}
8-
9-
.demo-ripple-container {
10-
box-shadow: rgba(0, 0, 0, 0.118) 0 10px 15px, rgba(0, 0, 0, 0.239) 0 5px 10px;
11-
cursor: pointer;
12-
font-size: 24px;
13-
height: 150px;
14-
line-height: 150px;
15-
position: relative;
16-
text-align: center;
17-
transition: all 200ms linear;
18-
width: 200px;
19-
20-
// Disable the blue overlay on touch. This makes it easier to see ripples fading in.
21-
-webkit-tap-highlight-color: transparent;
22-
@include user-select(none);
23-
24-
&.demo-ripple-disabled {
25-
color: rgba(32, 32, 32, 0.4);
26-
}
27-
28-
&.demo-ripple-rounded {
29-
border-radius: 50%;
30-
overflow: hidden;
31-
// z-index needed to make clipping to border-radius work correctly.
32-
// http://stackoverflow.com/questions/20001515/
33-
z-index: 1;
34-
}
35-
}
36-
37-
.demo-ripple-checkbox-option {
38-
margin: 10px 0;
39-
}
408
}

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
.example-ripple-container {
2+
/** Necessary until: https://github.com/angular/material2/pull/11913*/
3+
position: relative;
4+
5+
cursor: pointer;
6+
text-align: center;
7+
8+
width: 300px;
9+
height: 300px;
10+
line-height: 300px;
11+
}
12+
13+
/** Styles to make the demo look better. */
14+
mat-checkbox {
15+
margin: 6px 12px 6px 0;
16+
}
17+
18+
mat-form-field {
19+
margin: 0 12px 0 0;
20+
}

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<mat-checkbox [(ngModel)]="centered">Centered</mat-checkbox>
2+
<mat-checkbox [(ngModel)]="disabled">Disabled</mat-checkbox>
3+
<mat-checkbox [(ngModel)]="unbounded">Unbounded</mat-checkbox>
4+
5+
<mat-form-field>
6+
<input matInput [(ngModel)]="radius" type="number" placeholder="Radius">
7+
</mat-form-field>
8+
<mat-form-field>
9+
<input matInput [(ngModel)]="color" type="text" placeholder="Color">
10+
</mat-form-field>
11+
12+
13+
<div class="example-ripple-container mat-elevation-z4"
14+
matRipple
15+
[matRippleCentered]="centered"
16+
[matRippleDisabled]="disabled"
17+
[matRippleUnbounded]="unbounded"
18+
[matRippleRadius]="radius"
19+
[matRippleColor]="color">
20+
Click me
21+
</div>

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import {Component} from '@angular/core';
2+
3+
/**
4+
* @title MatRipple basic usage
5+
*/
6+
@Component({
7+
selector: 'ripple-overview-example',
8+
templateUrl: 'ripple-overview-example.html',
9+
styleUrls: ['ripple-overview-example.css'],
10+
})
11+
export class RippleOverviewExample {
12+
centered = false;
13+
disabled = false;
14+
unbounded = false;
15+
16+
radius: number;
17+
color: string;
18+
}

0 commit comments

Comments
 (0)