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>Wizard - 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="#">Wizard</a></li> <li class="toc-entry"><a href="#_wizard_about">About</a></li> <li class="toc-entry"><a href="#_wizard_controls">Controls</a></li> <li class="toc-entry"><a href="#_wizard_start">Start page</a></li> <li class="toc-entry"><a href="#_wizard_finish">Finish page</a></li> <li class="toc-entry"><a href="#_wizard_events">Events</a></li> <li class="toc-entry"><a href="#_wizard_methods">Methods</a></li> <li class="toc-entry"> <a href="#_wizard_customize">Customize</a> <ul> <li class="toc-entry"><a href="#_wizard_controls_style">Controls style</a></li> <li class="toc-entry"><a href="#_wizard_controls_icons">Controls icons</a></li> <li class="toc-entry"><a href="#_wizard_controls_classes">Custom classes</a></li> </ul> </li> <li class="toc-entry"><a href="#_wizard_responsive">Responsive</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>Wizard</h1> <p class="text-leader"> Create user friendly wizard easy with Metro 4 Wizard component. </p>  <h3 id="_wizard_about">About</h3> <p> With the <code>wizard</code> control, you can easily generate <code>multi-step</code> wizard dialogs. To create <code>wizard</code> create wizard structure and add role <code>wizard</code> with attribute <code>data-role="wizard"</code> to element. Each page a <code>section</code> element with sub block element with class <code>.page-content</code>. </p> <div class="example"> <div data-role="wizard" class="wizard-wide-sm"> <section><div class="page-content">Page 1</div></section> <section><div class="page-content">Page 2</div></section> <section><div class="page-content">Page 3</div></section> <section><div class="page-content">Page 4</div></section> <section><div class="page-content">Page 5</div></section> </div> </div> <pre><code class="html"> <div data-role="wizard"> <section><div class="page-content">Page 1</div></section> <section><div class="page-content">Page 2</div></section> <section><div class="page-content">Page 3</div></section> <section><div class="page-content">Page 4</div></section> <section><div class="page-content">Page 5</div></section> </div> </code></pre> <h3 id="_wizard_controls">Controls</h3> <p> When Metro 4 create a <code>wizard</code> component, it adds buttons to navigate on wizard steps: <code>help</code>, <code>prev</code>, <code>next</code> and <code>finish</code>. For each button you can use callback to interact with wizard: </p> <table class="table cell-border table-border options-table mt-4"> <thead> <tr> <th>Event</th> <th>Data-*</th> </tr> </thead> <tbody> <tr> <td>onHelpClick()</td> <td><code>data-on-help-click</code></td> </tr> <tr> <td>onPrevClick()</td> <td><code>data-on-prev-click</code></td> </tr> <tr> <td>onNextClick()</td> <td><code>data-on-next-click</code></td> </tr> <tr> <td>onFinishClick()</td> <td><code>data-on-finish-click</code></td> </tr> </tbody> </table> <h3 id="_wizard_start">Start page</h3> <p> You can specify page number fro start wizard with attribute <code>data-start="..."</code>. Value for this attribute must be page index from <code>1</code> to <code>pages count</code>. </p> <div class="example"> <div data-role="wizard" data-start="3" class="wizard-wide-sm"> <section><div class="page-content">Page 1</div></section> <section><div class="page-content">Page 2</div></section> <section><div class="page-content">Page 3</div></section> <section><div class="page-content">Page 4</div></section> <section><div class="page-content">Page 5</div></section> </div> </div> <pre><code class="html"> <div data-role="wizard" data-start="3"> <section><div class="page-content">Page 1</div></section> <section><div class="page-content">Page 2</div></section> <section><div class="page-content">Page 3</div></section> <section><div class="page-content">Page 4</div></section> <section><div class="page-content">Page 5</div></section> </div> </code></pre> <h3 id="_wizard_finish">Finish page</h3> <p> You can specify page, when finish button cam be enabled. To set it, use attribute <code>data-finish="..."</code>. Value for this attribute must be page index from <code>1</code> to <code>pages count</code>. </p> <div class="example"> <div data-role="wizard" data-finish="3" class="wizard-wide-sm"> <section><div class="page-content">Page 1</div></section> <section><div class="page-content">Page 2</div></section> <section><div class="page-content">Page 3</div></section> <section><div class="page-content">Page 4</div></section> <section><div class="page-content">Page 5</div></section> </div> </div> <pre><code class="html"> <div data-role="wizard" data-finish="3"> <section><div class="page-content">Page 1</div></section> <section><div class="page-content">Page 2</div></section> <section><div class="page-content">Page 3</div></section> <section><div class="page-content">Page 4</div></section> <section><div class="page-content">Page 5</div></section> </div> </code></pre>  <h3 id="_wizard_events">Events</h3> <p> You can use additional events to interact with wizard: </p> <table class="table cell-border table-border options-table mt-4"> <thead> <tr> <th>Event</th> <th>Data-*</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td>onPage(index, page, wizard)</td> <td><code>data-on-page</code></td> <td>Fired when page changed</td> </tr> <tr> <td>onBeforePrev(index, page, element)</td> <td><code>data-on-before-prev</code></td> <td>When this function return false, page not changed</td> </tr> <tr> <td>onBeforeNext(index, page, element)</td> <td><code>data-on-before-next</code></td> <td>When this function return false, page not changed</td> </tr> </tbody> </table> <h3 id="_wizard_methods">Methods</h3> <p> You can use <code>wizard</code> methods to interact with component. </p> <ul> <li><strong>next()</strong> - switch to next page</li> <li><strong>prev()</strong> - switch to prev page</li> <li><strong>first()</strong> - switch to first page</li> <li><strong>last()</strong> - switch to last page</li> <li><strong>toPage(p)</strong> - switch to specified page (p - page index from 1)</li> </ul> <h3 id="_wizard_customize">Customize</h3> <p> You can change a style for the <code>wizard</code> and it controls and elements with special <code>data attributes</code>. </p> <h4 id="_wizard_controls_style">Controls style</h4> <p> Two data attributes <code>data-button-mode</code> and <code>data-button-outline</code> are responsible for controls buttons style. With attribute <code>data-button-mode</code> you can set three modes for buttons: <code>button</code>, <code>cycle</code> and <code>square</code>. With attribute <code>data-button-outline</code> you can set buttons to <code>outline</code> style (default: true). See more about <a href="buttons.html">Buttons</a>. </p> <div class="example"> <div class="row"> <div class="cell-sm-6"> <h6>square</h6> <div data-role="wizard" data-button-mode="square"></div> </div> <div class="cell-sm-6"> <h6>cycle</h6> <div data-role="wizard" data-button-mode="cycle"></div> </div> </div> <div class="row mt-4"> <div class="cell-sm-6"> <h6>button</h6> <div data-role="wizard" data-button-mode="button" data-icon-help="<span>Help</span>" data-icon-prev="<span>Prev</span>" data-icon-next="<span>Next</span>" data-icon-finish="<span>Finish</span>" ></div> </div> <div class="cell-sm-6"> <h6>button, outline: false</h6> <div data-role="wizard" data-button-mode="default" data-button-outline="false"></div> </div> </div> </div> <pre><code class="html"> <div data-role="wizard" data-button-mode="square"></div> <div data-role="wizard" data-button-mode="cycle"></div> <div data-role="wizard" data-button-mode="button" data-icon-help="<span>Help</span>" data-icon-prev="<span>Prev</span>" data-icon-next="<span>Next</span>" data-icon-finish="<span>Finish</span>"></div> <div data-role="wizard" data-button-mode="button" data-button-outline="false"></div> </code></pre> <h4 id="_wizard_controls_icons">Controls icons</h4> <p> You can change controls icons with attributes: <code>data-icon-help</code>, <code>data-icon-prev</code>, <code>data-icon-next</code> and <code>data-icon-finish</code>. Value for these attributes must be valid <strong>html tag</strong> or <strong>path to image</strong>. </p> <div class="example"> <div data-role="wizard" data-button-mode="button" data-icon-help="<span>Help</span>" data-icon-prev="<span class='mif-arrow-left'></span>" data-icon-next="<span class='mif-arrow-right'></span>" data-icon-finish="images/checkmark.png" class="wizard-wide-sm"> <section><div class="page-content">Page 1</div></section> <section><div class="page-content">Page 2</div></section> <section><div class="page-content">Page 3</div></section> </div> </div> <pre><code class="html"> <div data-role="wizard" data-icon-help="<span>Help</span>" data-icon-prev="<span class='mif-arrow-left'></span>" data-icon-next="<span class='mif-arrow-right'></span>" data-icon-finish="images/checkmark.png"> <section><div class="page-content">Page 1</div></section> <section><div class="page-content">Page 2</div></section> <section><div class="page-content">Page 3</div></section> </div> </code></pre> <h4 id="_wizard_controls_classes">Custom classes</h4> <p> Also you can use special data attributes to define your own classes for wizard and controls: <code>data-cls-wizard</code>, <code>data-cls-actions</code>, <code>data-cls-help</code>, <code>data-cls-prev</code>, <code>data-cls-next</code>, <code>data-cls-finish</code>. </p> <p> If you need to change colors for feature and complete section, you must define your own style for this with next patterns: </p> <pre><code class="css"> Less preprocessor code: .wizard { & > section { &:nth-child(1) {border-color: @cyan;} &:nth-child(2) {border-color: darken(@cyan, 5%);} &:nth-child(3) {border-color: darken(@cyan, 10%);} &:nth-child(4) {border-color: darken(@cyan, 15%);} &:nth-child(5) {border-color: darken(@cyan, 20%);} &:nth-child(6) {border-color: darken(@cyan, 25%);} &:nth-child(7) {border-color: darken(@cyan, 30%);} &:nth-child(8) {border-color: darken(@cyan, 35%);} &:nth-child(9) {border-color: darken(@cyan, 40%);} &:nth-child(10) {border-color: darken(@cyan, 50%);} &.complete { &:nth-child(1) {border-color: @lightGray;} &:nth-child(2) {border-color: darken(@lightGray, 5%);} &:nth-child(3) {border-color: darken(@lightGray, 10%);} &:nth-child(4) {border-color: darken(@lightGray, 15%);} &:nth-child(5) {border-color: darken(@lightGray, 20%);} &:nth-child(6) {border-color: darken(@lightGray, 25%);} &:nth-child(7) {border-color: darken(@lightGray, 30%);} &:nth-child(8) {border-color: darken(@lightGray, 35%);} &:nth-child(9) {border-color: darken(@lightGray, 40%);} &:nth-child(10) {border-color: darken(@lightGray, 50%);} } } } </code></pre> <h3 id="_wizard_responsive">Responsive</h3> <p> By default wizard displayed in mobile mode wit shrinks feature and complete sections. To expand wizard use special classes: <code>.wizard-wide-*</code>. Where asterisk is one of: <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code> or <code>xxl</code>. If you need expand wizard always use class <code>.wizard-wide-fs</code>. See more information about <a href="media.html">Media breakpoints</a>. </p> <div class="example"> <div class="row"> <div class="cell-md-6"> <div data-role="wizard"> <section><div class="page-content">Page 1</div></section> <section><div class="page-content">Page 2</div></section> <section><div class="page-content">Page 3</div></section> </div> </div> <div class="cell-md-6"> <div data-role="wizard" class="wizard-wide-fs"> <section><div class="page-content">Page 1</div></section> <section><div class="page-content">Page 2</div></section> <section><div class="page-content">Page 3</div></section> </div> </div> </div> </div> </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>