@@ -64,34 +64,12 @@ <h3 class="header">Options</h3>
6464 < td > The content of the Toast.</ td >
6565 </ tr >
6666 < tr >
67- < td > unsafeHTML</ td >
68- < td > String, HTMLElement</ td >
69- < td > ''</ td >
70- < td >
71- HTML content that will be appended to to
72- < code class ="language-javascript "> text</ code > . Only use
73- properly sanitized or otherwise trusted data for
74- < code class ="language-javascript "> unsafeHTML</ code > .
75- </ td >
76- </ tr >
77- < tr >
78- < td > html</ td >
67+ < td > toastId</ td >
7968 < td > String</ td >
8069 < td > ''</ td >
8170 < td >
8271 < p >
83- (DEPRECATED): will be removed in a later release.
84- </ p >
85- < p >
86- HTML content that will be appended to
87- < code class ="language-javascript "> text</ code > . Only use
88- properly sanitized or otherwise trusted data for
89- < code class ="language-javascript "> html</ code > .
90- </ p >
91- < p >
92- Will be ignored if
93- < code class ="language-javascript "> unsafeHTML</ code > is
94- set.
72+ Id of an HTML element that will be used as tootip content.
9573 </ p >
9674 </ td >
9775 </ tr >
@@ -180,27 +158,34 @@ <h3 class="header">Properties</h3>
180158 < div id ="custom-html " class ="section scrollspy ">
181159 < h3 class ="header "> Custom HTML</ h3 >
182160 < p >
183- You can pass in an HTML String as the first argument as well.
184- Take a look at the example below, where we pass in text as well
185- as a flat button. If you call an external function instead of
186- in-line JavaScript, you will not need to escape quotation marks.
187- </ p >
188- < p >
189- Only use a properly sanitized or otherwise trusted HTML string.
190- </ p >
161+ You can pass in an toastId as the argument as well.
162+ This toastId should refer to some element in the HTML that will be used as toast content.
163+ </ p >
191164 < button
192- type ="button "
193- class ="waves-effect waves-light btn "
194- onclick ="displayCustomHTMLToast() "
195- >
196- Toast with Action
165+ type ="button "
166+ class ="waves-effect waves-light btn "
167+ onclick ="M.toast({toastId: 'my-toast-1'}) "
168+ > Toast 1!
197169 </ button >
198- < pre > < code class ="language-javascript ">
199- var toastHTML = '<span> I am toast content</span> <button class="btn-flat toast-action"> Undo</button> ';
200- M.toast({unsafeHTML: toastHTML});
201- </ code > </ pre >
170+ < div id ="my-toast-1 " style ="display: none; ">
171+ This is toast nº1 with a
172+ < a href ="https://github.com/materializecss "> link </ a >
173+ </ div >
174+ < button
175+ type ="button "
176+ class ="waves-effect waves-light btn "
177+ onclick ="M.toast({toastId: 'my-toast-2', classes: 'primary'}) "
178+ > Toast 2!
179+ </ button >
180+ < div id ="my-toast-2 " style ="display: none; ">
181+ This is toast nº2 with a < i class ="material-icons icon-demo "> insert_chart</ i >
182+ </ div >
183+ < pre > < code class ="language-markup ">
184+ < xmp > < button type ="button " class ="btn " onclick ="M.toast({toastId: 'my-toast-1'}) "> Toast 2!</ button >
185+ < div id ="my-toast-1 " style ="display: none; ">
186+ This is toast nº1 with a < a href ="https://github.com/materializecss "> link</ a >
187+ </ div > </ xmp > </ code > </ pre >
202188 </ div >
203-
204189 < div id ="callback " class ="scrollspy section ">
205190 < h3 class ="header "> Callback</ h3 >
206191 < p >
0 commit comments