Skip to content

Commit ac32137

Browse files
committed
add documentation on how to disable ripple
1 parent de0fc92 commit ac32137

File tree

2 files changed

+22
-14
lines changed

2 files changed

+22
-14
lines changed

docs/src/App.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,10 @@
8383
<router-link exact to="/components/image-loader">Image Loader</router-link>
8484
</md-list-item>
8585

86+
<md-list-item class="md-inset">
87+
<router-link exact to="/components/ink-ripple">Ink Ripple</router-link>
88+
</md-list-item>
89+
8690
<md-list-item class="md-inset">
8791
<router-link exact to="/components/input">Input</router-link>
8892
</md-list-item>
@@ -103,10 +107,6 @@
103107
<router-link exact to="/components/radio">Radio</router-link>
104108
</md-list-item>
105109

106-
<md-list-item class="md-inset">
107-
<router-link exact to="/components/ink-ripple">Ink Ripple</router-link>
108-
</md-list-item>
109-
110110
<md-list-item class="md-inset">
111111
<router-link exact to="/components/select">Select</router-link>
112112
</md-list-item>

docs/src/pages/components/InkRipple.vue

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,14 @@
33
<docs-component>
44
<div slot="description">
55
<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>
614
</div>
715

816
<div slot="api">
@@ -31,28 +39,28 @@
3139
<example-box card-title="Default">
3240
<div slot="demo">
3341
<div class="has-ripple">
34-
<md-ink-ripple></md-ink-ripple>
42+
<md-ink-ripple />
3543
This div has ripple effect
3644
</div>
3745

3846
<div class="has-ripple purple">
39-
<md-ink-ripple></md-ink-ripple>
47+
<md-ink-ripple />
4048
This div has ripple effect
4149
</div>
4250

4351
<div class="has-ripple blue">
44-
<md-ink-ripple></md-ink-ripple>
52+
<md-ink-ripple />
4553
This div has ripple effect
4654
</div>
4755

4856
<div class="has-ripple red">
49-
<md-ink-ripple></md-ink-ripple>
57+
<md-ink-ripple />
5058
This div has ripple effect
5159
</div>
5260

5361
<md-card class="card-ripple" md-with-hover>
5462
<md-card-media>
55-
<md-ink-ripple></md-ink-ripple>
63+
<md-ink-ripple />
5664
<img src="assets/card-image-1.jpg" alt="People">
5765
</md-card-media>
5866

@@ -75,28 +83,28 @@
7583
<div slot="code">
7684
<code-block lang="xml">
7785
&lt;div class=&quot;has-ripple&quot;&gt;
78-
&lt;md-ink-ripple&gt;&lt;/md-ink-ripple&gt;
86+
&lt;md-ink-ripple /&gt;
7987
This div has ripple effect
8088
&lt;/div&gt;
8189

8290
&lt;div class=&quot;has-ripple purple&quot;&gt;
83-
&lt;md-ink-ripple&gt;&lt;/md-ink-ripple&gt;
91+
&lt;md-ink-ripple /&gt;
8492
This div has ripple effect
8593
&lt;/div&gt;
8694

8795
&lt;div class=&quot;has-ripple blue&quot;&gt;
88-
&lt;md-ink-ripple&gt;&lt;/md-ink-ripple&gt;
96+
&lt;md-ink-ripple /&gt;
8997
This div has ripple effect
9098
&lt;/div&gt;
9199

92100
&lt;div class=&quot;has-ripple red&quot;&gt;
93-
&lt;md-ink-ripple&gt;&lt;/md-ink-ripple&gt;
101+
&lt;md-ink-ripple /&gt;
94102
This div has ripple effect
95103
&lt;/div&gt;
96104

97105
&lt;md-card class=&quot;card-ripple&quot; md-with-hover&gt;
98106
&lt;md-card-media&gt;
99-
&lt;md-ink-ripple&gt;&lt;/md-ink-ripple&gt;
107+
&lt;md-ink-ripple /&gt;
100108
&lt;img src=&quot;assets/card-image-1.jpg&quot; alt=&quot;People&quot;&gt;
101109
&lt;/md-card-media&gt;
102110

0 commit comments

Comments
 (0)