metro4

<!DOCTYPE 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="The most popular HTML, CSS, and JS library in Metro style."> <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>Input material - 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="#">Input material</a></li> <li class="toc-entry"><a href="#_input_about">About</a></li> <li class="toc-entry"><a href="#_input_label">Input label</a></li> <li class="toc-entry"><a href="#_input_informer">Informer label</a></li> <li class="toc-entry"><a href="#_input_icon">Input icon</a></li> <li class="toc-entry"><a href="#_input_customize">Customize</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>Input material</h1> <p class="text-leader"> Metro 4 provides simple classes and structures to create input fields in Material Design Style. </p>  <h3 id="_input_about">About</h3> <p class="text-small">Designed for using with <a href="https://phonegap.com/">PhoneGap</a>. Component used special <strong>-webkit</strong> css rules.</p> <p> In Metro 4, you can use enhancement version of input control to create input in Material Design Style. To define it, add attribute <code>data-role="materialinput"</code> to HTML input element. You can assign role <code>input</code> to any text inputs: <code>text</code>, <code>password</code>, <code>email</code>, etc. </p> <div class="example d-flex flex-justify-center"> <div class="emulator galaxy-s5 pt-14" style="height: 200px"> <div class="head-bar pos-absolute bg-cyan fg-white"> <button class="expand-button light ml-2"><span></span></button> <span class="app-title">Metro 4</span> </div> <div class="p-4"> <input type="text" data-role="materialinput" placeholder="Enter your email"> </div> </div> </div> <pre><code> <input type="text" data-role="materialinput" placeholder="Enter your email"> </code></pre> <h4 id="_input_label">Input with label</h4> <div class="example d-flex flex-justify-center"> <div class="emulator galaxy-s5 pt-14" style="height: 200px"> <div class="head-bar pos-absolute bg-cyan fg-white"> <button class="expand-button light ml-2"><span></span></button> <span class="app-title">Metro 4</span> </div> <div class="p-4"> <input type="text" data-role="materialinput" placeholder="Enter your email" data-label="User email"> </div> </div> </div> <pre><code> <input type="text" data-role="materialinput" data-label="User email" placeholder="Enter your email"> </code></pre> <h4 id="_input_informer">Input with label and informer</h4> <div class="example d-flex flex-justify-center"> <div class="emulator galaxy-s5 pt-14" style="height: 200px"> <div class="head-bar pos-absolute bg-cyan fg-white"> <button class="expand-button light ml-2"><span></span></button> <span class="app-title">Metro 4</span> </div> <div class="p-4"> <input type="text" data-role="materialinput" placeholder="Enter your email" data-label="User email" data-informer="Enter a valid email address"> </div> </div> </div> <pre><code> <input type="text" data-role="materialinput" data-label="User email" data-informer="Enter a valid email address" placeholder="Enter your email"> </code></pre> <h4 id="_input_icon">Input with label, informer and icon</h4> <div class="example d-flex flex-justify-center"> <div class="emulator galaxy-s5 pt-14" style="height: 200px"> <div class="head-bar pos-absolute bg-cyan fg-white"> <button class="expand-button light ml-2"><span></span></button> <span class="app-title">Metro 4</span> </div> <div class="p-4"> <input type="text" data-role="materialinput" placeholder="Enter your email" data-icon="<span class='mif-envelop'>" data-label="User email" data-informer="Enter a valid email address"> </div> </div> </div> <pre><code> <input type="text" data-role="materialinput" data-icon="<span class='mif-envelop'>" data-label="User email" data-informer="Enter a valid email address" placeholder="Enter your email"> </code></pre>  <h3 id="_input_customize">Customize</h3> <p> You can change visual style with special classes attributes: <code>data-cls-component</code>, <code>data-cls-input</code>, <code>data-cls-label</code>, <code>data-cls-informer</code>, <code>data-cls-icon</code>, <code>data-cls-line</code>. </p> <div class="example d-flex flex-justify-center"> <div class="emulator galaxy-s5 pt-14" style="height: 200px"> <div class="head-bar pos-absolute bg-cyan fg-white"> <button class="expand-button light ml-2"><span></span></button> <span class="app-title">Metro 4</span> </div> <div class="p-4"> <input type="text" data-role="materialinput" placeholder="Enter your email" data-icon="<span class='mif-envelop'>" data-label="User email" data-informer="Enter a valid email address" data-cls-line="bg-cyan" data-cls-label="fg-cyan" data-cls-informer="fg-lightCyan" data-cls-icon="fg-darkCyan" > </div> </div> </div> <pre><code> <input type="text" data-role="materialinput" placeholder="Enter your email" data-icon="<span class='mif-envelop'>" data-label="User email" data-informer="Enter a valid email address" data-cls-line="bg-cyan" data-cls-label="fg-cyan" data-cls-informer="fg-lightCyan" data-cls-icon="fg-darkCyan" > </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>    </body> </html>