metro4
Version:
The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style
227 lines (207 loc) • 11.9 kB
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 notifies simple and easy with Metro 4. 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>Notify system - 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="#">Notify system</a></li>
<li class="toc-entry"><a href="#_notify_about">About</a></li>
<li class="toc-entry"><a href="#_notify_setup">Setup system</a></li>
<li class="toc-entry"><a href="#_notify_options">Notify 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>Notify system</h1>
<p class="text-leader">
Create notifies simple and easy with Metro 4.
</p>
<!-- ads-html -->
<h3 id="_notify_about">About</h3>
<p>
The system of notifications is intended for informing users about the processes occurring on the site or in the application.
Metro 4 contains object <code>Metro.notify</code> to create notifies.
To create <code>notify</code> execute method <code>create</code> of <code>Metro.notify</code> object.
The method <code>create</code> has three parameters:
</p>
<ul>
<li><strong>message</strong> - notification message</li>
<li><strong>title</strong> - notification title</li>
<li><strong>options</strong> - notification options</li>
</ul>
<div class="example">
<button class="button primary" onclick="showNotify()">Notify Me</button>
<script>
function showNotify(){
Metro.notify.create("This is a notify", "Title", {});
}
</script>
</div>
<pre><code class="html">
<button class="button" onclick="showNotify();">Notify Me</button>
<script>
function showNotify(){
Metro.notify.create("This is a notify", "Title", {});
}
</script>
</code></pre>
<h3 id="_notify_setup">Setup system</h3>
<p>
For the notification system in Metro 4, a number of parameters are defined:
</p>
<ul>
<li><strong>container</strong> - where notifies showing (default: null)</li>
<li><strong>width</strong> - notifies width (default: 220px)</li>
<li><strong>timeout</strong> - timeout before the notify is close (default: 2000)</li>
<li><strong>duration</strong> - animation duration (default: 300)</li>
<li><strong>distance</strong> - distance where animation started (default: 100vh)</li>
<li><strong>animation</strong> - animation function (default: swing). See <a href="easing.html">easing utilities</a></li>
</ul>
<p>
You can change this options with <code>setup</code> method of <code>Metro.notify</code> object.
The <code>reset</code> method returns the default values.
</p>
<div class="example">
<button class="button secondary" onclick="showSetupDemo()">Setup demo</button>
<script>
function showSetupDemo(){
var notify = Metro.notify;
notify.setup({
width: 300,
duration: 1000,
animation: 'easeOutBounce'
});
notify.create("This is a notify", "", {});
notify.reset();
}
</script>
</div>
<pre><code class="html">
<button class="button secondary" onclick="showSetupDemo()">Setup demo</button>
<script>
function showSetupDemo(){
var notify = Metro.notify;
notify.setup({
width: 300,
duration: 1000,
animation: 'easeOutBounce'
});
notify.create("This is a notify");
notify.reset();
}
</script>
</code></pre>
<!-- ads-html -->
<h3 id="_notify_options">Notify options</h3>
<p>
For each notify you can set own options:
</p>
<ul>
<li><strong>keepOpen</strong> - if <code>true</code> the notification will not be automatically closed, user must click on notify to close it.</li>
<li><strong>cls</strong> - additional class(es) for the notification</li>
<li><strong>width</strong> - notification width</li>
<li><strong>onShow</strong> - function to be performed after the notification is showed</li>
<li><strong>onClose</strong> - function to be performed after the notification is closed</li>
</ul>
<div class="example">
<button class="button info" onclick="showKeepOpenDemo()">Keep open demo</button>
<button class="button dark" onclick="showCallbackDemo()">Callback demo</button>
<button class="button alert" onclick="showClassDemo()">Class demo</button>
<script>
function showClassDemo(){
var notify = Metro.notify;
notify.create("This is a notify with additional class.", null, {
cls: "alert"
});
}
function showKeepOpenDemo(){
var notify = Metro.notify;
notify.create("This is a notify. Click me to close.", null, {
keepOpen: true
});
}
function showCallbackDemo(){
var notify = Metro.notify;
notify.create("This is a notify.", null, {
onClose: function(){
alert('Hi from notification callback');
}
});
}
</script>
</div>
<pre><code>
<button class="button info" onclick="showKeepOpenDemo()">Keep open demo</button>
<button class="button dark" onclick="showCallbackDemo()">Callback demo</button>
<script>
function showClassDemo(){
var notify = Metro.notify;
notify.create("This is a notify with additional class.", "Alert", {
cls: "alert"
});
}
function showKeepOpenDemo(){
var notify = Metro.notify;
notify.create("This is a notify. Click me to close", null, {
keepOpen: true
});
}
function showCallbackDemo(){
var notify = Metro.notify;
notify.create("This is a notify", null, {
onClose: function(){
alert('Hi from notification callback');
}
});
}
</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>
<!-- ads-script -->
<!-- ga-script -->
<!-- hit-ua -->
</body>
</html>