|
3 | 3 | <docs-component> |
4 | 4 | <div slot="description"> |
5 | 5 | <p>Ink ripples confirm user input by immediately expanding outward from the point of touch. The card lifts to indicate an active state.</p> |
| 6 | + <p>To disable the ripple component globally just call the API: </p> |
| 7 | + <code-block lang="javascript"> |
| 8 | + // Anywhere |
| 9 | + Vue.material.inkRipple = false |
| 10 | + |
| 11 | + // Inside a Vue Intance |
| 12 | + this.$material.inkRipple = false |
| 13 | + </code-block> |
6 | 14 | </div> |
7 | 15 |
|
8 | 16 | <div slot="api"> |
|
31 | 39 | <example-box card-title="Default"> |
32 | 40 | <div slot="demo"> |
33 | 41 | <div class="has-ripple"> |
34 | | - <md-ink-ripple></md-ink-ripple> |
| 42 | + <md-ink-ripple /> |
35 | 43 | This div has ripple effect |
36 | 44 | </div> |
37 | 45 |
|
38 | 46 | <div class="has-ripple purple"> |
39 | | - <md-ink-ripple></md-ink-ripple> |
| 47 | + <md-ink-ripple /> |
40 | 48 | This div has ripple effect |
41 | 49 | </div> |
42 | 50 |
|
43 | 51 | <div class="has-ripple blue"> |
44 | | - <md-ink-ripple></md-ink-ripple> |
| 52 | + <md-ink-ripple /> |
45 | 53 | This div has ripple effect |
46 | 54 | </div> |
47 | 55 |
|
48 | 56 | <div class="has-ripple red"> |
49 | | - <md-ink-ripple></md-ink-ripple> |
| 57 | + <md-ink-ripple /> |
50 | 58 | This div has ripple effect |
51 | 59 | </div> |
52 | 60 |
|
53 | 61 | <md-card class="card-ripple" md-with-hover> |
54 | 62 | <md-card-media> |
55 | | - <md-ink-ripple></md-ink-ripple> |
| 63 | + <md-ink-ripple /> |
56 | 64 | <img src="assets/card-image-1.jpg" alt="People"> |
57 | 65 | </md-card-media> |
58 | 66 |
|
|
75 | 83 | <div slot="code"> |
76 | 84 | <code-block lang="xml"> |
77 | 85 | <div class="has-ripple"> |
78 | | - <md-ink-ripple></md-ink-ripple> |
| 86 | + <md-ink-ripple /> |
79 | 87 | This div has ripple effect |
80 | 88 | </div> |
81 | 89 |
|
82 | 90 | <div class="has-ripple purple"> |
83 | | - <md-ink-ripple></md-ink-ripple> |
| 91 | + <md-ink-ripple /> |
84 | 92 | This div has ripple effect |
85 | 93 | </div> |
86 | 94 |
|
87 | 95 | <div class="has-ripple blue"> |
88 | | - <md-ink-ripple></md-ink-ripple> |
| 96 | + <md-ink-ripple /> |
89 | 97 | This div has ripple effect |
90 | 98 | </div> |
91 | 99 |
|
92 | 100 | <div class="has-ripple red"> |
93 | | - <md-ink-ripple></md-ink-ripple> |
| 101 | + <md-ink-ripple /> |
94 | 102 | This div has ripple effect |
95 | 103 | </div> |
96 | 104 |
|
97 | 105 | <md-card class="card-ripple" md-with-hover> |
98 | 106 | <md-card-media> |
99 | | - <md-ink-ripple></md-ink-ripple> |
| 107 | + <md-ink-ripple /> |
100 | 108 | <img src="assets/card-image-1.jpg" alt="People"> |
101 | 109 | </md-card-media> |
102 | 110 |
|
|
0 commit comments