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
119 lines (105 loc) • 4.98 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">
<link href="../metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
<title>Test Tag input - Metro 4 :: Popular HTML, CSS and JS library</title>
</head>
<body class="m4-cloak">
<div class="example h-vh-100">
<div id="navview" data-role="navview" data-compact="md" data-expand="lg" data-toggle="#pane-toggle" data-active-state="true">
<nav class="navview-pane">
<button class="pull-button">
<span class="mif-menu"></span>
</button>
<div class="suggest-box">
<input type="text" data-role="input" data-clear-button="false" data-search-button="true">
<button class="holder">
<span class="mif-search"></span>
</button>
</div>
<ul class="navview-menu">
<li>
<a href="#">
<span class="icon"><span class="mif-home"></span></span>
<span class="caption">Home</span>
</a>
</li>
<li class="item-separator"></li>
<li class="item-header">Main pages</li>
<li>
<a href="#">
<span class="icon"><span class="mif-apps"></span></span>
<span class="caption">Apps</span>
</a>
</li>
<li class="active">
<a href="#">
<span class="icon"><span class="mif-gamepad"></span></span>
<span class="caption">Games</span>
</a>
</li>
<li>
<a href="#">
<span class="icon"><span class="mif-envelop"></span></span>
<span class="caption">Email</span>
<div class="badges">
<span class="badge inline">10</span>
<span class="badge inline">5</span>
</div>
</a>
</li>
<li>
<a href="#" class="dropdown-toggle">
<span class="icon"><span class="mif-music"></span></span>
<span class="caption">Music</span>
</a>
<ul class="navview-menu" data-role="dropdown">
<li>
<a href="#">
<span class="icon"><span class="mif-gamepad"></span></span>
<span class="caption">Games</span>
</a>
</li>
<li>
<a href="#">
<span class="icon"><span class="mif-film"></span></span>
<span class="caption">Movies</span>
</a>
</li>
</ul>
</li>
<li class="disabled">
<a href="#">
<span class="icon"><span class="mif-images"></span></span>
<span class="caption">Images</span>
</a>
</li>
<li class="item-separator"></li>
<li>
<a href="#">
<span class="icon"><span class="mif-folder"></span></span>
<span class="caption">Documents</span>
</a>
</li>
</ul>
</nav>
<div class="navview-content pl-4-md pr-4-md">
<h1>
<button id="pane-toggle" class="button square d-none-md"><span class="mif-menu" ></span></button>
What is?
</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<button onclick="Metro.getPlugin('#navview', 'navview').pullClick(this)" class="button">Close menu</button>
</div>
</div>
</div>
<script src="../metro/js/metro.js?ver=@@b-version"></script>
<script>
</script>
</body>
</html>