Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-05-27 16:14:00 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

remove directive example of ripple

Browse source
This commit is contained in:
Marcos Moura 2016-12-01 01:43:38 -02:00
parent 45b8d68a5a
commit 77dcbf5c1d
1 changed files with 0 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -143,100 +143,6 @@
</code-block>
</div>
</example-box>
<example-box card-title="As a directive">
<div slot="demo">
<span class="has-ripple" v-md-ink-ripple>This span has ripple effect</span>
<span class="has-ripple purple" v-md-ink-ripple>This span has ripple effect</span>
<span class="has-ripple blue" v-md-ink-ripple>This span has ripple effect</span>
<span class="has-ripple red" v-md-ink-ripple>This span has ripple effect</span>
<md-card class="card-ripple" md-with-hover>
<md-card-media v-md-ink-ripple>
<img src="assets/card-image-1.jpg" alt="People">
</md-card-media>
<md-card-actions>
<md-button class="md-icon-button">
<md-icon>favorite</md-icon>
</md-button>
<md-button class="md-icon-button">
<md-icon>bookmark</md-icon>
</md-button>
<md-button class="md-icon-button">
<md-icon>share</md-icon>
</md-button>
</md-card-actions>
</md-card>
</div>
<div slot="code">
<code-block lang="xml">
&lt;span class=&quot;has-ripple&quot; v-md-ink-ripple&gt;This span has ripple effect&lt;/span&gt;
&lt;span class=&quot;has-ripple purple&quot; v-md-ink-ripple&gt;This span has ripple effect&lt;/span&gt;
&lt;span class=&quot;has-ripple blue&quot; v-md-ink-ripple&gt;This span has ripple effect&lt;/span&gt;
&lt;span class=&quot;has-ripple red&quot; v-md-ink-ripple&gt;This span has ripple effect&lt;/span&gt;
&lt;div&gt;
&lt;md-avatar v-md-ink-ripple&gt;
&lt;img src=&quot;//placeimg.com/40/40/people/1&quot; alt=&quot;People&quot;&gt;
&lt;/md-avatar&gt;
&lt;md-avatar v-md-ink-ripple class=&quot;md-avatar-icon&quot;&gt;
&lt;md-icon&gt;home&lt;/md-icon&gt;
&lt;/md-avatar&gt;
&lt;/div&gt;
&lt;md-card class=&quot;card-ripple&quot; md-with-hover&gt;
&lt;md-card-media v-md-ink-ripple&gt;
&lt;img src=&quot;assets/card-image-1.jpg&quot; alt=&quot;People&quot;&gt;
&lt;/md-card-media&gt;
&lt;md-card-actions&gt;
&lt;md-button class=&quot;md-icon-button&quot;&gt;
&lt;md-icon&gt;favorite&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-button class=&quot;md-icon-button&quot;&gt;
&lt;md-icon&gt;bookmark&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-button class=&quot;md-icon-button&quot;&gt;
&lt;md-icon&gt;share&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;/md-card-actions&gt;
&lt;/md-card&gt;
</code-block>
<code-block lang="scss">
.has-ripple {
margin-bottom: 16px;
padding: 16px;
display: inline-block;
position: relative;
}
.blue {
color: #2196F3;
}
.purple {
color: #9C27B0;
}
.red {
color: #F44336;
}
.card-ripple {
width: 300px;
margin-top: 24px;
}
</code-block>
</div>
</example-box>
</div>
</docs-component>
</page-content>