forked from olton/Metro-UI-CSS
-
Notifications
You must be signed in to change notification settings - Fork 0
/
toast.html
163 lines (142 loc) · 8.29 KB
/
toast.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!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" 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>
<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">
</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_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_custom">Custom toast</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>
<!-- ads-html -->
<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_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>
</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"></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");
}
}
</script>
<!-- ads-script -->
<!-- ga-script -->
</body>
</html>