metro4
Version:
The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style
205 lines (184 loc) • 11.1 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="twitter:site" content="@metroui">
<meta name="twitter:creator" content="@pimenov_sergey">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Metro 4 Components Library">
<meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.">
<meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png">
<meta property="og:url" content="https://metroui.org.ua/v4/index.html">
<meta property="og:title" content="Metro 4 Components Library">
<meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.">
<meta property="og:type" content="website">
<meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png">
<meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="968">
<meta property="og:image:height" content="504">
<meta name="author" content="Sergey Pimenov">
<meta name="description" content="Metro 4 provides simple method to create ripple effect when object clicked.">
<meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
<link href="highlight/styles/github.css" rel="stylesheet">
<link href="docsearch/docsearch.min.css" rel="stylesheet">
<link href="css/site.css" rel="stylesheet">
<title>Ripple - Metro 4 :: Popular HTML, CSS and JS library</title>
</head>
<body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend">
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-load="initDocSearchEngine()"></div>
<div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper">
<h5>Table of contents</h5>
<hr/>
<ul class="toc-nav">
<li class="toc-entry"><a href="#">Ripple</a></li>
<li class="toc-entry"><a href="#_ripple_create">Create ripple</a></li>
<li class="toc-entry"><a href="#_ripple_targets">Ripple targets</a></li>
<li class="toc-entry"><a href="#_ripple_color">Color</a></li>
<li class="toc-entry"><a href="#_ripple_alpha">Alpha</a></li>
</ul>
</div>
<main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md">
<div class="place-right d-none d-block-lg" style="width: 200px;">
<img src="images/logo.png" class="w-100">
</div>
<h1>Ripple</h1>
<p class="text-leader">
Metro 4 provides simple method to create ripple effect when object clicked.
</p>
<!-- ads-html -->
<h3 id="_ripple_create">Create ripple effect</h3>
<p>
To add <code>ripple</code> effect for object you must add attribute <code>data-role="ripple"</code>.
</p>
<div class="example">
<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>
</div>
<pre><code class="html">
<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>
</code></pre>
<h3 id="_ripple_targets">Ripple targets</h3>
<p>
Also you can define <code>sub elements</code> for ripple effect. To define sub elements add attribute <code>data-ripple-target</code>.
An attribute can take <code>name</code>, <code>class</code> or <code>id</code> of selector.
</p>
<div class="example">
<ul class="v-menu border bd-light" style="width: 220px;" 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>
</div>
<pre><code class="html">
<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>
</code></pre>
<!-- ads-html -->
<h3 id="_ripple_color">Ripple color</h3>
<p>
To define ripple color add attribute <code>data-ripple-color</code>.
An attribute can take a <code>hex color</code> value.
</p>
<div class="example">
<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>
</div>
<pre><code class="html">
<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>
</code></pre>
<h3 id="_ripple_alpha">Ripple alpha channel</h3>
<p>
To define alpha factor for ripple effect, you can use attribute <code>data-ripple-alpha</code>. An attribute can take value from <code>0</code> to <code>1</code>.
</p>
<div class="example">
<button class="command-button bg-white border bd-grayWhite" 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-white border bd-grayWhite" 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>
</div>
<pre><code class="html">
<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>
</code></pre>
</main>
</div>
</div>
<script src="docsearch/docsearch.min.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="metro/js/metro.js?ver=@@b-version"></script>
<script src="highlight/highlight.pack.js"></script>
<script src="js/clipboard.min.js"></script>
<script src="js/site.js"></script>
<!-- ads-script -->
<!-- ga-script -->
<!-- hit-ua -->
</body>
</html>