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="Create steps control with special Metro 4 component. 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>Stepper - 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="#">Stepper</a></li> <li class="toc-entry"><a href="#_stepper_about">About</a></li> <li class="toc-entry"><a href="#_stepper_view">View mode</a></li> <li class="toc-entry"><a href="#_stepper_steps">Steps count</a></li> <li class="toc-entry"><a href="#_stepper_events">Events</a></li> <li class="toc-entry"><a href="#_stepper_methods">Methods</a></li> <li class="toc-entry"><a href="#_stepper_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>Stepper</h1> <p class="text-leader"> Create steps control with special Metro 4 component. </p>  <h3 id="_stepper_about">About</h3> <p> If you need to create a control with steps, you can use Metro 4 component <code>stepper</code>. To create <code>stepper</code>, add role with attribute <code>data-role="stepper"</code> to element and define options with other data attributes. </p> <div class="example"> <div data-role="stepper"></div> </div> <pre><code class="html"> <div data-role="stepper"></div> </code></pre> <h3 id="_stepper_view">View mode</h3> <p> You can use three view mode to display step marker: <code>square</code> (default), <code>cycle</code> and <code>diamond</code>. To set view mode use attribute <code>data-view="..."</code>. </p> <div class="example"> <div data-role="stepper"></div> <div data-role="stepper" data-view="cycle"></div> <div data-role="stepper" data-view="diamond"></div> </div> <pre><code class="html"> <div data-role="stepper" data-view="square"></div> <div data-role="stepper" data-view="cycle"></div> <div data-role="stepper" data-view="diamond"></div> </code></pre> <h3 id="_stepper_steps">Steps count</h3> <p> You can set steps count with attribute <code>data-steps</code> and set current step with attribute <code>data-step</code>. </p> <div class="example"> <div data-role="stepper" data-steps="5" data-step="3"></div> </div> <pre><code class="html"> <div data-role="stepper" data-steps="5" data-step="3"></div> </code></pre> <h3 id="_stepper_events">Events</h3> <p> When stepper works, his generate events. You can use a callback for these events to interact with a stepper. </p> <table class="table cell-border table-border options-table"> <thead> <tr> <th>Event</th> <th>Data-*</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td>onStep(step, element)</td> <td><code>data-on-step</code></td> <td>Fired when step was changed</td> </tr> <tr> <td>onStepClick(step, element)</td> <td><code>data-on-step-click</code></td> <td>Fired when user click on the step (required set attribute <code>data-click-step="true"</code>)</td> </tr> <tr> <td>onStepperCreate(element)</td> <td><code>data-on-stepper-create</code></td> <td>Fired when stepper created</td> </tr> </tbody> </table>  <h3 id="_stepper_methods">Methods</h3> <p> Stepper component has any methods to interact with it: </p> <ul> <li><strong>next()</strong> - go to next step</li> <li><strong>prev()</strong> - go to previous step</li> <li><strong>fist()</strong> - go to first step</li> <li><strong>last()</strong> - go to last step</li> <li><strong>toStep(step)</strong> - go to required step (from 1 to steps count)</li> </ul> <div class="example"> <div data-role="stepper" data-steps="5" id="stepper_methods"></div> <div class="d-flex flex-justify-center mt-4"> <button class="button m-1" onclick="stepperMethod('first')">First</button> <button class="button m-1" onclick="stepperMethod('prev')">Prev</button> <button class="button m-1" onclick="stepperMethod('next')">Next</button> <button class="button m-1" onclick="stepperMethod('last')">Last</button> </div> </div> <pre><code class="html"> <div data-role="stepper" data-steps="5" id="stepper_methods"></div> <div class="d-flex flex-justify-center mt-4"> <button class="button m-1" onclick="stepperMethod('first')">First</button> <button class="button m-1" onclick="stepperMethod('prev')">Prev</button> <button class="button m-1" onclick="stepperMethod('next')">Next</button> <button class="button m-1" onclick="stepperMethod('last')">Last</button> </div> <script> function stepperMethod (m){ var stepper = $("#stepper_methods").data('stepper'); stepper[m](); } </script> </code></pre> <h3 id="_stepper_customize">Customize</h3> <p> You can customize stepper with special attributes: <code>data-cls-stepper</code>, <code>data-cls-step</code>, <code>data-cls-complete</code>, <code>data-cls-current</code>. </p> <div class="example"> <div data-role="stepper" data-steps="5" data-step="3" data-view="diamond" data-cls-step="rounded" data-cls-complete="bg-pink" data-cls-current="bg-red"></div> </div> <pre><code class="html"> <div data-role="stepper" data-steps="5" data-step="3" data-view="diamond" data-cls-step="rounded" data-cls-complete="bg-pink" data-cls-current="bg-red"> </div> </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> <script> function stepperMethod (m){ var stepper = $("#stepper_methods").data('stepper'); stepper[m](); } </script>    </body> </html>