-
-
Notifications
You must be signed in to change notification settings - Fork 5
/
toasts.html
231 lines (219 loc) · 9.41 KB
/
toasts.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
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
<!DOCTYPE html>
<html lang="en">
<head>
{{> head }}
</head>
<body>
{{> navbar }}
<main>
{{> intro}}
<div class="container">
<div class="row">
<div class="col s12 m8 offset-m1 xl7 offset-xl1">
<div id="introduction" class="section scrollspy">
<p>
Materialize provides an easy way for you to send unobtrusive alerts to your users through toasts. These toasts are also placed and sized responsively, try it out by
clicking the button below on different device sizes.
</p>
<button type="button" class="waves-effect waves-light btn" onclick="M.toast({text: 'I am a toast', classes: 'primary'})">Toast!</button>
<p>To do this, call the M.toast() function programmatically in JavaScript.</p>
<pre><code class="language-javascript">
M.toast({text: 'I am a toast!'})
</code></pre>
<p>One way to add this into your application is to add this as an onclick event to a button.</p>
<pre><code class="language-html">
<xmp>
<button type="button" onclick="M.toast({text: 'I am a toast'})" class="btn">Toast!</button>
</xmp>
</code></pre>
</div>
<div id="options" class="scrollspy section">
<h3 class="header">Options</h3>
<p>You can customize the behavior of each Toast using these options.</p>
<table class="striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>text</td>
<td>String</td>
<td>''</td>
<td>The content of the Toast.</td>
</tr>
<tr>
<td>toastId</td>
<td>String</td>
<td>''</td>
<td>
<p>Id of an HTML Template element that will be used as tootip content.</p>
</td>
</tr>
<tr>
<td>displayLength</td>
<td>Number</td>
<td>4000</td>
<td>Length in ms the Toast stays before dismissal.</td>
</tr>
<tr>
<td>inDuration</td>
<td>Number</td>
<td>300</td>
<td>Transition in duration in milliseconds.</td>
</tr>
<tr>
<td>outDuration</td>
<td>Number</td>
<td>375</td>
<td>Transition out duration in milliseconds.</td>
</tr>
<tr>
<td>classes</td>
<td>String</td>
<td>''</td>
<td>Classes to be added to the toast element.</td>
</tr>
<tr>
<td>completeCallback</td>
<td>Function</td>
<td>null</td>
<td>Callback function called when toast is dismissed.</td>
</tr>
<tr>
<td>activationPercent</td>
<td>Number</td>
<td>0.8</td>
<td>The percentage of the toast's width it takes for a drag to dismiss a Toast.</td>
</tr>
</tbody>
</table>
</div>
<div id="properties" class="scrollspy section">
<h3 class="header">Properties</h3>
<table class="striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>el</td>
<td>Element</td>
<td>The toast element.</td>
</tr>
<tr>
<td>options</td>
<td>Object</td>
<td>The options the instance was initialized with.</td>
</tr>
<tr>
<td>panning</td>
<td>Boolean</td>
<td>Describes the current pan state of the Toast.</td>
</tr>
<tr>
<td>timeRemaining</td>
<td>Number</td>
<td>The remaining amount of time in ms that the toast will stay before dismissal.</td>
</tr>
</tbody>
</table>
</div>
<div id="custom-html" class="section scrollspy">
<h3 class="header">Custom HTML</h3>
<p>You can pass in an toastId as the argument as well. This toastId should refer to some template in the HTML that will be used as toast content.</p>
<button type="button" class="waves-effect waves-light btn" onclick="M.toast({toastId: 'my-toast-1'})">Toast 1!</button>
<template id="my-toast-1">
<div>
This is toast nº1 with a
<a href="https://github.com/materializecss"> link </a>
</div>
</template>
<button type="button" class="waves-effect waves-light btn" onclick="M.toast({toastId: 'my-toast-2', classes: 'primary'})">Toast 2!</button>
<div id="my-toast-2" style="display: none">This is toast nº2 with a <i class="material-icons icon-demo">insert_chart</i></div>
<pre><code class="language-html">
<xmp>
<button type="button" class="btn" onclick="M.toast({toastId: 'my-toast-1'})">Toast 1!</button>
<template id="my-toast-1">
<div>
This is toast nº1 with a <a href="https://github.com/materializecss"> link </a>
</div>
</template>
</xmp>
</code></pre>
</div>
<div id="callback" class="scrollspy section">
<h3 class="header">Callback</h3>
<p>You can have the toast callback a function when it has been dismissed.</p>
<button type="button" class="btn" onclick="M.toast({text: 'I am a toast', completeCallback: function(){alert('Your toast was dismissed')}})">Toast!</button>
<pre><code class="language-html">
<button type="button" class="btn" onclick="M.toast({text: 'I am a toast', completeCallback: function(){alert('Your toast was dismissed')}})">Toast!</button>
</code></pre>
</div>
<div id="styling" class="scrollspy section">
<h3 class="header">Styling Toasts</h3>
<p>
We've added the ability to customize your toasts easily. You can pass in classes as an optional parameter into the toast function. We've added a rounded class for
you, but you can create your own CSS classes and apply them to toasts. Checkout out our full example below.
</p>
<button type="button" class="waves-effect waves-light btn" onclick="M.toast({text: 'I am a toast!', classes: 'rounded'})">Round Toast!</button>
<pre><code class="language-javascript">
// 'rounded' is the class I'm applying to the toast
M.toast({text: 'I am a toast!', classes: 'rounded'});
</code></pre>
</div>
<div id="dismissal" class="scrollspy section">
<h3 class="header">Dismiss a Toast Programmatically</h3>
<p>
To remove a specific toast using JavaScript, access the
<code class="language-javascript">M_Toast</code> toast HTML element and call the dismiss function
</p>
<pre><code class="language-javascript">
// Get toast DOM Element, get instance, then call dismiss function
var toastElement = document.querySelector('.toast');
var toastInstance = M.Toast.getInstance(toastElement);
toastInstance.dismiss();
</code></pre>
<h5>Dismiss all Toasts</h5>
<pre><code class="language-javascript">
M.Toast.dismissAll();
</code></pre>
</div>
</div>
<!-- Table of Contents -->
<div class="col hide-on-small-only m3 xl3">
<div class="toc-wrapper">
<div style="height: 1px">
<ul class="section table-of-contents">
<li><a href="#introduction">Introduction</a></li>
<li><a href="#options">Options</a></li>
<li><a href="#properties">Properties</a></li>
<li><a href="#custom-html">Custom HTML</a></li>
<li><a href="#callback">Callback</a></li>
<li><a href="#styling">Styling Toasts</a></li>
<li><a href="#dismissal">Dismissing Toasts</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</main>
{{> footer }}
<script type="module" src="/src/main.ts"></script>
</body>
<script type="text/javascript">
var displayCustomHTMLToast = function () {
var toastHTML = '<span>I am toast content</span><button class="btn-flat toast-action">Undo</button>';
M.toast({ html: toastHTML });
};
</script>
</html>