feat(toast): custom HTML allows templates

materializecss · Feb 27, 2024 · db76ce8 · db76ce8
1 parent 471838c
commit db76ce8
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 17 deletions.
diff --git a/packages/materialize b/packages/materialize
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/toasts.html b/toasts.html
@@ -69,7 +69,7 @@ <h3 class="header">Options</h3>
                     <td>''</td>
                     <td>
                       <p>
-                        Id of an HTML element that will be used as tootip content.
+                        Id of an HTML Template element that will be used as tootip content.
                       </p>
                     </td>
                   </tr>
@@ -159,18 +159,20 @@ <h3 class="header">Properties</h3>
               <h3 class="header">Custom HTML</h3>
               <p>
                 You can pass in an toastId as the argument as well.
-                This toastId should refer to some element in the HTML that will be used as toast content.
+                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>
-              <div id="my-toast-1" style="display: none;">
+              <template id="my-toast-1">
+                <div>
                   This is toast nº1 with a
                   <a href="https://github.com/materializecss"> link </a>
-              </div>
+                </div>                  
+              </template>
               <button
                   type="button"
                   class="waves-effect waves-light btn"
@@ -181,10 +183,12 @@ <h3 class="header">Custom HTML</h3>
                   This is toast nº2 with a <i class="material-icons icon-demo">insert_chart</i>
               </div>
               <pre><code class="language-markup">
-<xmp><button type="button" class="btn" onclick="M.toast({toastId: 'my-toast-1'})">Toast 2!</button>
-<div id="my-toast-1" style="display: none;">
-  This is toast nº1 with a <a href="https://github.com/materializecss">link</a>
-</div></xmp></code></pre>
+<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>