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 a countdown element in Metro 4 is very simple with the use of a special countdown 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>Countdown - 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="#">Countdown</a></li> <li class="toc-entry"><a href="#_countdown_about">About</a></li> <li class="toc-entry"><a href="#_countdown_options">Options</a></li> <li class="toc-entry"><a href="#_countdown_interval">Setup interval</a></li> <li class="toc-entry"><a href="#_countdown_customize">Customize</a></li> <li class="toc-entry"><a href="#_countdown_events">Events</a></li> <li class="toc-entry"><a href="#_countdown_methods">Methods</a></li> <li class="toc-entry"><a href="#_countdown_i18n">i18n</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>Countdown</h1> <p class="text-leader"> Create a countdown element in Metro 4 is very simple with the use of a special countdown component. </p>  <h3 id="_countdown_about">About</h3> <p> The goal of the <code>countdown</code> component is to create an element that can count down time from the specified time point. To create <code>countdown</code> add <code>data-role="countdown"</code> attribute to element and <code>setup options</code>. </p> <div class="example"> <div data-role="countdown" data-hours="90" data-on-alarm="console.log('alarm')"></div> </div> <pre><code class="html"> <div data-role="countdown" data-hours="90"></div> </code></pre> <h3 id="_countdown_options">Options</h3> <p> You can set <code>options</code> to set times and visual styles for the <code>countdown</code> element. </p> <table class="table cell-border table-border options-table"> <thead> <tr> <th>Options</th> <th>Data-*</th> <th>Default</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td>days</td> <td><code>data-days</code></td> <td>0</td> <td>Add days to interval</td> </tr> <tr> <td>hours</td> <td><code>data-hours</code></td> <td>0</td> <td>Add hours to interval</td> </tr> <tr> <td>minutes</td> <td><code>data-minutes</code></td> <td>0</td> <td>Add minutes to interval</td> </tr> <tr> <td>seconds</td> <td><code>data-seconds</code></td> <td>0</td> <td>Add seconds to interval</td> </tr> <tr> <td>date</td> <td><code>data-date</code></td> <td>Now</td> <td>Set start point interval</td> </tr> <tr> <td>daysLabel</td> <td><code>data-days-label</code></td> <td>days</td> <td>Set label for days</td> </tr> <tr> <td>hoursLabel</td> <td><code>data-hours-label</code></td> <td>hours</td> <td>Set label for hours</td> </tr> <tr> <td>minutesLabel</td> <td><code>data-minutes-label</code></td> <td>mins</td> <td>Set label for minutes</td> </tr> <tr> <td>secondsLabel</td> <td><code>data-seconds-label</code></td> <td>secs</td> <td>Set label for seconds</td> </tr> <tr> <td>clsZero</td> <td><code>data-cls-zero</code></td> <td></td> <td>Set additional class for zero value</td> </tr> <tr> <td>clsAlarm</td> <td><code>data-cls-alarm</code></td> <td></td> <td>Set additional class for alarm state</td> </tr> <tr> <td>clsDays</td> <td><code>data-cls-days</code></td> <td></td> <td>Set additional class for days</td> </tr> <tr> <td>clsHours</td> <td><code>data-cls-hours</code></td> <td></td> <td>Set additional class for hours</td> </tr> <tr> <td>clsMinutes</td> <td><code>data-cls-minutes</code></td> <td></td> <td>Set additional class for minutes</td> </tr> <tr> <td>clsSeconds</td> <td><code>data-cls-seconds</code></td> <td></td> <td>Set additional class for seconds</td> </tr> <tr> <td>onCountdownCreate</td> <td><code>data-on-countdown-create</code></td> <td>Metro.noop</td> <td>Fired when component is created</td> </tr> <tr> <td>onAlarm</td> <td><code>data-on-alarm</code></td> <td>Metro.noop</td> <td>Fired when countdown is done</td> </tr> <tr> <td>onTick</td> <td><code>data-on-tick</code></td> <td>Metro.noop</td> <td>Fired when countdown is ticks</td> </tr> <tr> <td>onZero</td> <td><code>data-on-zero</code></td> <td>Metro.noop</td> <td>Fired when part is sets to zero</td> </tr> </tbody> </table> <h3 id="_countdown_interval">Setup interval</h3> <p> By default the <code>start point</code> for interval is <code>today</code>. To this point you can add <code>days</code>, <code>hours</code>, <code>minutes</code> and <code>seconds</code>. </p> <div class="example"> <div data-role="countdown" data-days="1" data-hours="2" data-minutes="3" data-seconds="4"></div> </div> <pre><code class="html"> <div data-role="countdown" data-days="1" data-hours="2" data-minutes="3" data-seconds="4"></div> </code></pre> <p> Also you can set start point manually. To set start point add <code>data-date</code> attribute to element. Value for this attribute can be <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15"><strong>VALID</strong> date string</a>. </p> <div class="example"> <div data-role="countdown" data-date="01/01/2018" data-days="1" data-hours="2" data-minutes="3" data-seconds="4"></div> </div> <pre><code class="html"> <div data-role="countdown" data-date="01/01/2018" data-days="1" data-hours="2" data-minutes="3" data-seconds="4"></div> </code></pre> <h3 id="_countdown_customize">Customize</h3> <p> You can customize <code>countdown</code> control with special attributes: <code>data-cls-zero</code>, <code>data-cls-alarm</code>, <code>data-cls-days</code>, <code>data-cls-hours</code>, <code>data-cls-minutes</code>, <code>data-cls-seconds</code>. With this attributes you can define classes to customize visual style for <code>countdown</code>. </p> <div class="example text-center"> <div id="countdown_customize" data-role="countdown" data-start="false" data-days="1" data-seconds="10" data-cls-part="no-divider" data-cls-days="bg-orange fg-white" data-cls-hours="bg-red fg-white" data-cls-minutes="bg-green fg-white" data-cls-seconds="bg-blue fg-white" data-cls-zero="bg-light fg-lightGray" ></div> <button class="button mt-2" onclick="$('#countdown_customize').data('countdown').start()">Start</button> </div> <pre><code class="html"> <div data-role="countdown" data-start="false" data-days="1" data-seconds="10" data-cls-part="no-divider" data-cls-days="bg-orange fg-white" data-cls-hours="bg-red fg-white" data-cls-minutes="bg-green fg-white" data-cls-seconds="bg-blue fg-white" data-cls-zero="bg-light fg-lightGray" ></div> </code></pre>  <h3 id="_countdown_events">Events</h3> <p> When the <code>countdown</code> is running, it generates various <code>events</code> that you can use. How to define Metro 4 components events see <a href="events.html">Events rules</a>. </p> <ul> <li><strong>onCountdownCreate(el)</strong> - fired when component created</li> <li><strong>onAlarm(now, el) - fired when countdown is done</strong></li> <li><strong>onTick({d, h, m, s}, el) - fired every tick (one second)</strong></li> <li><strong>onZero(part, el) - fired when part sets to zero</strong></li> </ul> <div class="example text-center"> <div id="countdown_events" data-role="countdown" data-start="false" data-days="1" data-seconds="10" data-on-countdown-create="console.log('Countdown was created!')" ></div> <button class="button mt-2" onclick="$('#countdown_events').data('countdown').start()">Start</button> </div> <pre><code class="html"> <div id="countdown_events" data-role="countdown" data-start="false" data-days="1" data-seconds="10" data-on-countdown-create="console.log('Countdown was created!')" ></div> <button class="button mt-2" onclick="$('#countdown_events').data('countdown').start()">Start</button> </code></pre> <h3 id="_countdown_methods">Methods</h3> <p> Each <code>countdown</code> component contains same methods: </p> <ul> <li><strong>start()</strong> - Start countdown</li> <li><strong>stop()</strong> - Stop countdown</li> <li><strong>pause()</strong> - Pause countdown</li> <li><strong>isPaused()</strong> - Return true, if countdown is paused</li> <li><strong>getTimepoint(asDate)</strong> - Return countdown start point</li> <li><strong>getBreakpoint(asDate)</strong> - Return countdown break point</li> <li><strong>getLeft()</strong> - Return object. It contains days, hours, minutes and seconds to stop</li> </ul> <div class="example text-center"> <div id="countdown_methods" data-role="countdown" data-start="false" data-days="1" data-seconds="10" ></div> <button class="button mt-2" onclick="$('#countdown_methods').data('countdown').start()">Start</button> <button class="button mt-2" onclick="$('#countdown_methods').data('countdown').stop()">Stop</button> <button class="button mt-2" onclick="$('#countdown_methods').data('countdown').pause()">Pause</button> <button class="button mt-2" onclick="alert($('#countdown_methods').data('countdown').getBreakpoint(true))">Breakpoint</button> <button class="button mt-2" onclick="alert('Minutes left: ' + $('#countdown_methods').data('countdown').getLeft().minutes)">Minutes left</button> </div> <pre><code> <div id="countdown_methods" data-role="countdown" data-start="false" data-days="1" data-seconds="10" ></div> <button class="button mt-2" onclick="$('#countdown_methods').data('countdown').start()">Start</button> <button class="button mt-2" onclick="$('#countdown_methods').data('countdown').stop()">Stop</button> <button class="button mt-2" onclick="$('#countdown_methods').data('countdown').pause()">Pause</button> <button class="button mt-2" onclick="alert($('#countdown_methods').data('countdown').getBreakpoint(true))">Breakpoint</button> <button class="button mt-2" onclick="alert('Minutes left: ' + $('#countdown_methods').data('countdown').getLeft().minutes)">Minutes left</button> </code></pre> <h3 id="_countdown_i18n">i18n</h3> <p> To change <code>language</code> for <code>countdown</code> use attribute <code>data-locale</code>. All predefined language files stored in <code>i18n</code> folder. You can add own internationalisation file to <code>i18n</code> folder with same structure and use it. For more information about <code>i18n</code> see <a href="i18n.html">this page</a>. </p> <div class="example"> <div data-role="countdown" data-hours="90" data-locale="de-DE" style="font-size: 36px"></div> </div> <pre><code class="html"> <div data-role="countdown" data-hours="90" data-locale="de-DE"></div> </code></pre> <p> You can change locale in runtime. To change locale, update value for attribute <code>data-locale</code>. </p> <div class="example"> <div class="d-flex flex-justify-center mb-4"> <button class="button m-1" onclick="changeLocale($(this).text())">en-US</button> <button class="button m-1" onclick="changeLocale($(this).text())">de-DE</button> <button class="button m-1" onclick="changeLocale($(this).text())">hu-HU</button> <button class="button m-1" onclick="changeLocale($(this).text())">uk-UA</button> <button class="button m-1" onclick="changeLocale($(this).text())">ru-RU</button> </div> <div id="countdown_locale" data-role="countdown" data-hours="90" style="font-size: 36px"></div> <script> function changeLocale(locale){ $('#countdown_locale').attr('data-locale', locale); } </script> </div> <pre><code class="html"> <div class="d-flex flex-justify-center mb-4"> <button class="button m-1" onclick="changeLocale($(this).text())">en-US</button> <button class="button m-1" onclick="changeLocale($(this).text())">de-DE</button> <button class="button m-1" onclick="changeLocale($(this).text())">hu-HU</button> <button class="button m-1" onclick="changeLocale($(this).text())">uk-UA</button> <button class="button m-1" onclick="changeLocale($(this).text())">ru-RU</button> </div> <div id="countdown_locale" data-role="countdown" data-hours="90" style="font-size: 36px"></div> <script> function changeLocale(locale){ $('#countdown_locale').attr('data-locale', locale); } </script> </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>