Ripple
Metro UI provides simple method to create ripple effect when object clicked.
Create ripple effect
To add ripple
effect for object you must add attribute data-role="ripple"
.
<button class="command-button" data-role="ripple">
<span class="mif-share icon"></span>
<span class="caption">
Yes, share and connect
<small>Use this option for home or work</small>
</span>
</button>
Ripple targets
Also you can define sub elements
for ripple effect. To define sub elements add attribute data-ripple-target
.
An attribute can take name
, class
or id
of selector.
<ul class="v-menu border bd-light" data-role="ripple" data-ripple-target="li">
<li class="menu-title">General</li>
<li><a><span class="mif-home icon"></span> Home</a></li>
<li class="menu-title">Products</li>
<li><a><span class="mif-windows icon"></span> Windows</a></li>
<li><a><span class="mif-skype icon"></span> Skype</a></li>
<li class="menu-title">Shop</li>
<li><a><span class="mif-cart icon"></span> Cart</a></li>
</ul>
Ripple color
To define ripple color add attribute data-ripple-color
.
An attribute can take a hex color
value.
<button class="command-button" data-role="ripple" data-ripple-color="#1ba1e2">
<span class="mif-share icon"></span>
<span class="caption">
Yes, share and connect
<small>Use this option for home or work</small>
</span>
</button>
Ripple alpha channel
To define alpha factor for ripple effect, you can use attribute data-ripple-alpha
. An attribute can take value from 0
to 1
.
<button class="command-button bg-green"
data-role="ripple"
data-ripple-color="#CE352C"
data-ripple-alpha=".2">
<span class="mif-share icon"></span>
<span class="caption">
Yes, share and connect
<small>Use this option for home or work</small>
</span>
</button>
<button class="command-button bg-green"
data-role="ripple"
data-ripple-color="#CE352C"
data-ripple-alpha="1">
<span class="mif-share icon"></span>
<span class="caption">
Yes, share and connect
<small>Use this option for home or work</small>
</span>
</button>