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=" Toasts are used for system messaging. They also display at the bottom of the screen, but may not be swiped off-screen. Metro 4 provides simple methods to create toasts."> <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>Toast - 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="#">Toast</a></li> <li class="toc-entry"><a href="#_toast_init">Setup toast</a></li> <li class="toc-entry"><a href="#_toast_create">Create toast</a></li> <li class="toc-entry"><a href="#_toast_callback">Callback</a></li> <li class="toc-entry"><a href="#_toast_timeout">Timeout</a></li> <li class="toc-entry"><a href="#_toast_classes">Predefined classes</a></li> <li class="toc-entry"><a href="#_toast_custom">Custom toast</a></li> <li class="toc-entry"><a href="#_toast_options">Additional options</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>Toast</h1> <p class="text-leader"> Toasts are used for system messaging. They also display at the bottom of the screen, but may not be swiped off-screen. Metro 4 provides simple methods to create toasts. </p>  <h3 id="_toast_init">Setup toast</h3> <p> You can setup options for toasts with function <code>init</code>. The following options are available: </p> <table class="table cell-border table-border options-table"> <thead> <tr> <th>Option</th> <th>Default</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td><code>callback</code></td> <td>Metro.noop</td> <td>Callback for execute code after toast showing</td> </tr> <tr> <td><code>timeout</code></td> <td>METRO_TIMEOUT</td> <td>Time for toast shown, by default 2000</td> </tr> <tr> <td><code>distance</code></td> <td>20</td> <td>Distance from window side (top or bottom) in pixels, by default 20px</td> </tr> <tr> <td><code>showTop</code></td> <td>false</td> <td>When true, toast show on top of window</td> </tr> <tr> <td><code>clsToast</code></td> <td></td> <td>Additional classes for toast</td> </tr> </tbody> </table> <pre><code> Metro.toast.init({ showTop: true, distance: 60 }).create("This is a toast"); </code></pre> <h3 id="_toast_create">Create toast</h3> <p> To create <code>toast</code> you must call method <code>Metro.toast.create</code>. Method contains next parameters: </p> <ul> <li><strong>message</strong>: Toast message</li> <li><strong>callback</strong>: Callback function.Executed after toast hided</li> <li><strong>timeout</strong>: Time to show toast</li> <li><strong>cls</strong>: Classes to customize toast</li> </ul> <pre class=""><code> Metro.toast.create(message, callback, timeout, cls); </code></pre> <h4>Quick example</h4> <div class="example"> <button class="button primary" onclick="runToast()">Default toast</button> <button class="button secondary" onclick="runToast('callback')">Toast with a callback</button> <button class="button info" onclick="runToast('timeout')">Toast timeout</button> <button class="button success" onclick="runToast('class')">Toast custom class</button> </div> <pre class=""><code> <button class="button primary" onclick="runToast()">Default toast</button> <button class="button secondary" onclick="runToast('callback')">Toast with a callback</button> <button class="button info" onclick="runToast('timeout')">Toast timeout</button> <button class="button success" onclick="runToast('class')">Toast custom class</button> <script> function runToast(mode) { var toast = Metro.toast.create; switch (mode) { case 'callback': toast("This is a toast with callback", function(){ alert('Toast callback executed!'); }); break; case 'timeout': toast("This is a toast with timeout 5s", null, 5000); break; case 'class': toast("This is a toast with custom class", null, 5000, "bg-green fg-white"); break; default: toast("This is default toast"); } } </script> </code></pre> <h3 id="_toast_callback">Callback</h3> <p> If you need execute code after toast showing, add <code>callback function</code> to call toast. </p> <pre class=""><code> Metro.toast.create("Toast message", function(){ ...callback function... }); </code></pre> <h3 id="_toast_timeout">Timeout</h3> <p> Want to show the toast a certain time? Add a <code>timeout</code> parameter. </p> <pre class=""><code> Metro.toast.create("Toast message", null, 5000); </code></pre> <h3 id="_toast_classes">Predefined classes</h3> <p class="text-small">New in 4.2.10</p> <p> You can use predefined classes for your <code>toasts</code>. This list of classes include: <code>.primary</code>, <code>.secondary</code>, <code>.success</code>, <code>.alert</code>, <code>.warning</code>, <code>.yellow</code>, <code>.info</code> and <code>.light</code> classes. </p> <div class="example"> <button class="button primary" onclick="toastClasses('primary')">Primary</button> <button class="button secondary" onclick="toastClasses('secondary')">Secondary</button> <button class="button success" onclick="toastClasses('success')">Success</button> <button class="button alert" onclick="toastClasses('alert')">Alert</button> <button class="button warning" onclick="toastClasses('warning')">Warning</button> <button class="button yellow" onclick="toastClasses('yellow')">Yellow</button> <button class="button info" onclick="toastClasses('info')">Info</button> <button class="button light" onclick="toastClasses('light')">Light</button> </div> <pre class=""><code> Metro.toast.create("Toast message", null, null, "info"); </code></pre> <h3 id="_toast_custom">Custom toast</h3> <p> If you want to display a toast in your own style, add a <code>cls</code> parameter. </p> <pre class=""><code> Metro.toast.create("Toast message", null, null, cls); </code></pre>  <h3 id="_toast_options">Additional options</h3> <p> You can sets additional options. Options is a object with next properties: </p> <pre><code> options: { callback: Metro.noop, timeout: METRO_TIMEOUT, distance: 20, showTop: false, clsToast: "" } </code></pre> <div class="example"> <button class="button primary" onclick="toastOptions()">Show on top</button> </div> <pre class=""><code> var options = { showTop: true, timeout: 3000 } Metro.toast.create("Toast message", null, null, null, options); </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 runToast(mode) { var toast = Metro.toast.create; switch (mode) { case 'callback': toast("This is a toast with callback", function(){alert('Toast callback executed!');}); break; case 'timeout': toast("This is a toast with timeout 5s", null, 5000); break; case 'class': toast("This is a toast with custom class", null, 5000, "bg-green fg-white"); break; default: toast("This is default toast"); } } function toastClasses(cls){ var toast = Metro.toast.create; toast("This is a toast with a predefined class ." + cls, null, 5000, cls); } function toastOptions(){ var options = { showTop: true, timeout: 3000 }; Metro.toast.create("Toast message", null, null, null, options); } </script>    </body> </html>