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>Cube - Metro 4 :: Popular HTML, CSS and JS library</title> <script> var myDemoRules1 = [ {on: {'top': [16], 'left': [4], 'right': [1]}}, {on: {'top': [12, 15], 'left': [3, 8], 'right': [2, 5]}}, {on: {'top': [11], 'left': [7], 'right': [6]}}, {on: {'top': [8, 14], 'left': [2, 12], 'right': [9, 3]}}, {on: {'top': [10, 7], 'left': [6, 11], 'right': [10, 7]}}, {on: {'top': [13, 4], 'left': [1, 16], 'right': [13, 4]}}, {on: {'top': [9, 6, 3], 'left': [5, 10, 15], 'right': [14, 11, 8]}}, {on: {'top': [1, 2, 5], 'left': [9, 13, 14], 'right': [15, 12, 16]}} ]; var myDemoRules2 = [ {on: {'top': [1, 2, 5], 'left': [9, 13, 14], 'right': [15, 12, 16]}}, {on: {'top': [9, 6, 3], 'left': [5, 10, 15], 'right': [14, 11, 8]}}, {on: {'top': [13, 4], 'left': [1, 16], 'right': [13, 4]}}, {on: {'top': [10, 7], 'left': [6, 11], 'right': [10, 7]}}, {on: {'top': [8, 14], 'left': [2, 12], 'right': [9, 3]}}, {on: {'top': [11], 'left': [7], 'right': [6]}}, {on: {'top': [12, 15], 'left': [3, 8], 'right': [2, 5]}}, {on: {'top': [16], 'left': [4], 'right': [1]}} ]; var myDemoRules3 = [ {on: {'top': [16], 'left': [4], 'right': [1]}}, {on: {'top': [15, 12], 'left': [3, 8], 'right': [5, 2]}}, {on: {'top': [14, 8], 'left': [2, 12], 'right': [9, 3]}}, {on: {'top': [13, 4], 'left': [1, 16], 'right': [13, 4]}}, {on: {'top': [1], 'left': [13], 'right': [16]}}, {on: {'top': [6], 'left': [10], 'right': [11]}}, {on: {'top': [11], 'left': [7], 'right': [6]}}, {on: {'top': [10,7], 'left': [6,11], 'right': [10,7]}}, {on: {'top': [9,3], 'left': [5,15], 'right': [14,8]}}, {on: {'top': [5,2], 'left': [9,14], 'right': [15,12]}} ]; </script> </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="#">Cube</a></li> <li class="toc-entry"><a href="#_cube_about">About</a></li> <li class="toc-entry"><a href="#_cube_cells">Setup cells</a></li> <li class="toc-entry"><a href="#_cube_colors">Set cube colors</a></li> <li class="toc-entry"><a href="#_cube_rules">Flashing rules</a></li> <li class="toc-entry"><a href="#_cube_numbers">Numbers</a></li> <li class="toc-entry"><a href="#_cube_axis">Axis</a></li> <li class="toc-entry"><a href="#_cube_events">Events</a></li> <li class="toc-entry"><a href="#_cube_methods">Methods</a></li> <li class="toc-entry"><a href="#_cube_customize">My cube - my rules</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>Cube</h1> <p class="text-leader"> Create cool information object with Metro 4 Cube component. </p>  <h3 id="_cube_about">About</h3> <p> The <code>cube</code> is a visual component to provide the user with discrete information. To create <code>cube</code> use attribute <code>data-role="cube"</code>. </p> <div class="example"> <div data-role="cube" data-rules=""></div> </div> <pre><code class="html"> <div data-role="cube"></div> </code></pre> <h3 id="_cube_cells">Setup cells</h3> <p> You can setup cells with two attributes: <code>data-cells</code> and <code>data-margin</code>. With <code>data-cells</code> you can set how many cells draw on cube side. With <code>data-margin</code> you can set cells margin. </p> <div class="example"> <div data-role="cube" data-cells="10" data-margin="2" data-rules=""></div> </div> <pre><code class="html"> <div data-role="cube" data-cells="10" data-margin="2"></div> </code></pre> <h3 id="_cube_colors">Cube colors</h3> <p> You can setup cell color with attribute <code>data-color</code> and setup flashing color with attribute <code>data-flash-color</code>. Value for <code>data-color</code> can be <strong>class name</strong> or <strong>hex color</strong>. Value for <code>data-flash-color</code> must be <strong>hex color</strong>. </p> <div class="example"> <div data-role="cube" data-color="bg-cyan bd-darkCyan" data-flash-color="#aa00ff"></div> </div> <pre><code class="html"> <div data-role="cube" data-color="bg-cyan bd-darkCyan" data-flash-color="#aa00ff"></div> </code></pre>  <h3 id="_cube_rules">Flashing rules</h3> <p> By default cube has own set of rules for flashing. You can set your own rules set with attribute <code>data-rule</code>. Value for this attribute must be object name where rules is stored. </p> <div class="example"> <div data-role="cube" data-rules="myDemoRules2"></div> </div> <pre><code class="html"> <div data-role="cube" data-rules="myDemoRules2"></div> <script> var myDemoRules2 = [ {on: {'top': [1, 2, 5], 'left': [9, 13, 14], 'right': [15, 12, 16]}}, {on: {'top': [9, 6, 3], 'left': [5, 10, 15], 'right': [14, 11, 8]}}, {on: {'top': [13, 4], 'left': [1, 16], 'right': [13, 4]}}, {on: {'top': [10, 7], 'left': [6, 11], 'right': [10, 7]}}, {on: {'top': [8, 14], 'left': [2, 12], 'right': [9, 3]}}, {on: {'top': [11], 'left': [7], 'right': [6]}}, {on: {'top': [12, 15], 'left': [3, 8], 'right': [2, 5]}}, {on: {'top': [16], 'left': [4], 'right': [1]}} ]; </script> </code></pre> <p> To store rules use next format: </p> <pre><code class="javascript"> var myRules = [ { on: { 'top': [cell_number, ...], 'left': [cell_number, ...], 'right': [cell_number, ...] }, off: { 'top': [cell_number, ...], 'left': [cell_number, ...], 'right': [cell_number, ...] } }, ... ]; </code></pre> <p> On each step you must set cells for <code>flash on</code> and <code>flash off</code>. Flash step must contain minimum <code>on</code> or <code>off</code> rule. In example below present default rules set. </p> <pre><code class="javascript"> default_rules: [ { on: {'top': [16], 'left': [4], 'right': [1]}, off: {'top': [13, 4], 'left': [1, 16], 'right': [13, 4]} }, { on: {'top': [12, 15], 'left': [3, 8], 'right': [2, 5]}, off: {'top': [9, 6, 3], 'left': [5, 10, 15], 'right': [14, 11, 8]} }, { on: {'top': [11], 'left': [7], 'right': [6]}, off: {'top': [1, 2, 5], 'left': [9, 13, 14], 'right': [15, 12, 16]} }, { on: {'top': [8, 14], 'left': [2, 12], 'right': [9, 3]}, off: {'top': [16], 'left': [4], 'right': [1]} }, { on: {'top': [10, 7], 'left': [6, 11], 'right': [10, 7]}, off: {'top': [12, 15], 'left': [3, 8], 'right': [2, 5]} }, { on: {'top': [13, 4], 'left': [1, 16], 'right': [13, 4]}, off: {'top': [11], 'left': [7], 'right': [6]} }, { on: {'top': [9, 6, 3], 'left': [5, 10, 15], 'right': [14, 11, 8]}, off: {'top': [8, 14], 'left': [2, 12], 'right': [9, 3]} }, { on: {'top': [1, 2, 5], 'left': [9, 13, 14], 'right': [15, 12, 16]}, off: {'top': [10, 7], 'left': [6, 11], 'right': [10, 7]} } ] </code></pre> <h4>Flash interval</h4> <p> To set <code>flash interval</code> use attribute <code>data-flash-interval</code>. By default this attribute has value <code>1000 ms</code>. </p> <pre><code class="html"> <div data-role="cube" data-flash-interval="1000"></div> </code></pre> <h3 id="_cube_numbers">Numbers of cells</h3> <p> When creating rules, it is useful to know the cell numbers and their location on the faces of the cube. Cells placed from left to right from top left side corner. </p> <div class="example"> <div data-role="cube" data-numbers="true" data-rules=""></div> </div> <h3 id="_cube_axis">Axis</h3> <p> You can set visible cube <code>axis</code>. To set axis visible use attribute <code>data-show-axis="true"</code>. </p> <div class="example"> <div data-role="cube" data-show-axis="true" data-rules=""></div> </div> <pre><code class="html"> <div data-role="cube" data-show-axis="true"></div> </code></pre> <p> You can change axis color and style with attributes <code>data-cls-axis</code>, <code>data-cls-axis-x</code>, <code>data-cls-axis-y</code>, <code>data-cls-axis-z</code> and <code>data-axis-style</code>. For attributes <code>data-cls-axis*</code> use custom class. For <code>data-axis-style</code> use one of next values: <code>arrow</code>, <code>line</code> and <code>no-style</code>. </p> <div class="example"> <div class="mb-10"> <p class="h5 text-center">line</p> <div data-role="cube" data-show-axis="true" data-axis-style="line" data-cls-axis="bg-dark" data-rules=""></div> </div> <div class="mb-10"> <p class="h5 text-center">arrow</p> <div data-role="cube" data-show-axis="true" data-axis-style="arrow" data-cls-axis-x="bg-cyan" data-cls-axis-y="bg-green" data-cls-axis-z="bg-orange" data-rules=""></div> </div> <div class="mb-10"> <p class="h5 text-center">no-style</p> <div data-role="cube" data-show-axis="true" data-axis-style="no-style" data-rules=""></div> </div> </div> <pre><code class="html"> <div data-role="cube" data-show-axis="true" data-axis-style="line" data-cls-axis="bg-dark" data-rules=""></div> <div data-role="cube" data-show-axis="true" data-axis-style="arrow" data-cls-axis-x="bg-cyan" data-cls-axis-y="bg-green" data-cls-axis-z="bg-orange" data-rules=""></div> <div data-role="cube" data-show-axis="true" data-axis-style="no-style" data-rules=""></div> </code></pre> <h3 id="_cube_events">Events</h3> <p> When <code>cube</code> works, it generate the number of events. You can use callbacks for this events to interact with it. </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>onTick(index, element)</td> <td><code>data-on-tick</code></td> <td>Fired for each cube flashing step</td> </tr> <tr> <td>onCubeCreate(element)</td> <td><code>data-on-cube-create</code></td> <td>Fired when cube was created</td> </tr> </tbody> </table> <pre><code class="html"> <div data-role="cube" data-on-tick="console.log(arguments)"></div> </code></pre> <p class="remark"> See additional <a href="https://codepen.io/olton/full/zpdVPo/">example</a> on Codepen.io. </p> <h3 id="_cube_methods">Cube methods</h3> <p> Cube has the number of methods to interact with it. </p> <table class="table cell-border table-border options-table mt-4"> <thead> <tr> <th>Method</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td><code>start()</code></td> <td>Start flashing</td> </tr> <tr> <td><code>stop()</code></td> <td>Stop flashing</td> </tr> <tr> <td><code>rule(r)</code></td> <td>Set rules</td> </tr> <tr> <td><code>rule()</code></td> <td>Get rules</td> </tr> <tr> <td><code>axis(show)</code></td> <td>Set axis visibility. If parameter is true - axis is visible</td> </tr> </tbody> </table> <div class="example"> <div class="text-center"> <button class="button" onclick="setRules(myDemoRules1)">Rule set #1</button> <button class="button" onclick="setRules(myDemoRules2)">Rule set #2</button> <button class="button" onclick="setRules(myDemoRules3)">Rule set #3</button> </div> <div data-role="cube" id="demo-cube-methods"></div> <div class="text-center"> <button class="button" onclick="$('#demo-cube-methods').data('cube').axis(true)">Show axis</button> <button class="button" onclick="$('#demo-cube-methods').data('cube').axis(false)">Hide axis</button> </div> <script> function setRules(rules){ $('#demo-cube-methods').data('cube').rule(rules) } </script> </div> <pre><code class="html"> <div class="text-center"> <button class="button" onclick="setRules(myDemoRules1)">Rule set #1</button> <button class="button" onclick="setRules(myDemoRules2)">Rule set #2</button> <button class="button" onclick="setRules(myDemoRules3)">Rule set #3</button> </div> <div data-role="cube" id="demo-cube-methods"></div> <div class="text-center"> <button class="button" onclick="$('#demo-cube-methods').data('cube').axis(true)">Show axis</button> <button class="button" onclick="$('#demo-cube-methods').data('cube').axis(false)">Hide axis</button> </div> <script> function setRules(rules){ $('#demo-cube-methods').data('cube').rule(rules) } </script> </code></pre> <h3 id="_cube_customize">My cube - my rules</h3> <p> You can <strong>customize</strong> <code>cube</code> component. For change cube visual style use attributes: <code>data-cls-cube</code>, <code>data-cls-side</code>, <code>data-cls-cell</code>, <code>data-cls-side-left</code>, <code>data-cls-side-right</code>, <code>data-cls-side-top</code>, <code>data-cls-axis</code>, <code>data-cls-axis-x</code>, <code>data-cls-axis-y</code>, <code>data-cls-axis-z</code>. Use these attributes to set additional classes to cube elements. </p> <p> Also you can set your own function for flashing cells with attribute <code>data-custom</code>. See <a href="https://codepen.io/olton/full/jYaJQR/">example</a> on codepen.io. </p> </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>