Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-03-26 02:40:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add documentation on how to disable ripple

Browse source
This commit is contained in:
Marcos Moura 2017-01-10 01:35:51 -02:00
parent de0fc928d0
commit ac32137716
2 changed files with 22 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
docs/src/App.vue
View file

@ -83,6 +83,10 @@
<router-link exact to="/components/image-loader">Image Loader</router-link>
</md-list-item>
<md-list-item class="md-inset">
<router-link exact to="/components/ink-ripple">Ink Ripple</router-link>
</md-list-item>
<md-list-item class="md-inset">
<router-link exact to="/components/input">Input</router-link>
</md-list-item>
@ -103,10 +107,6 @@
<router-link exact to="/components/radio">Radio</router-link>
</md-list-item>
<md-list-item class="md-inset">
<router-link exact to="/components/ink-ripple">Ink Ripple</router-link>
</md-list-item>
<md-list-item class="md-inset">
<router-link exact to="/components/select">Select</router-link>
</md-list-item>

28
docs/src/pages/components/InkRipple.vue
View file

@ -3,6 +3,14 @@
<docs-component>
<div slot="description">
<p>Ink ripples confirm user input by immediately expanding outward from the point of touch. The card lifts to indicate an active state.</p>
<p>To disable the ripple component globally just call the API: </p>
<code-block lang="javascript">
// Anywhere
Vue.material.inkRipple = false
// Inside a Vue Intance
this.$material.inkRipple = false
</code-block>
</div>
<div slot="api">
@ -31,28 +39,28 @@
<example-box card-title="Default">
<div slot="demo">
<div class="has-ripple">
<md-ink-ripple></md-ink-ripple>
<md-ink-ripple />
This div has ripple effect
</div>
<div class="has-ripple purple">
<md-ink-ripple></md-ink-ripple>
<md-ink-ripple />
This div has ripple effect
</div>
<div class="has-ripple blue">
<md-ink-ripple></md-ink-ripple>
<md-ink-ripple />
This div has ripple effect
</div>
<div class="has-ripple red">
<md-ink-ripple></md-ink-ripple>
<md-ink-ripple />
This div has ripple effect
</div>
<md-card class="card-ripple" md-with-hover>
<md-card-media>
<md-ink-ripple></md-ink-ripple>
<md-ink-ripple />
<img src="assets/card-image-1.jpg" alt="People">
</md-card-media>
@ -75,28 +83,28 @@
<div slot="code">
<code-block lang="xml">
&lt;div class=&quot;has-ripple&quot;&gt;
&lt;md-ink-ripple&gt;&lt;/md-ink-ripple&gt;
&lt;md-ink-ripple /&gt;
This div has ripple effect
&lt;/div&gt;
&lt;div class=&quot;has-ripple purple&quot;&gt;
&lt;md-ink-ripple&gt;&lt;/md-ink-ripple&gt;
&lt;md-ink-ripple /&gt;
This div has ripple effect
&lt;/div&gt;
&lt;div class=&quot;has-ripple blue&quot;&gt;
&lt;md-ink-ripple&gt;&lt;/md-ink-ripple&gt;
&lt;md-ink-ripple /&gt;
This div has ripple effect
&lt;/div&gt;
&lt;div class=&quot;has-ripple red&quot;&gt;
&lt;md-ink-ripple&gt;&lt;/md-ink-ripple&gt;
&lt;md-ink-ripple /&gt;
This div has ripple effect
&lt;/div&gt;
&lt;md-card class=&quot;card-ripple&quot; md-with-hover&gt;
&lt;md-card-media&gt;
&lt;md-ink-ripple&gt;&lt;/md-ink-ripple&gt;
&lt;md-ink-ripple /&gt;
&lt;img src=&quot;assets/card-image-1.jpg&quot; alt=&quot;People&quot;&gt;
&lt;/md-card-media&gt;