Merge branch 'toast-content' of https://github.com/danice/materialize…

…-docs into danice-toast-content

toasts.html

@@ -64,34 +64,12 @@ <h3 class="header">Options</h3>
                     <td>The content of the Toast.</td>
                   </tr>
                   <tr>
-                    <td>unsafeHTML</td>
-                    <td>String, HTMLElement</td>
-                    <td>''</td>
-                    <td>
-                      HTML content that will be appended to to
-                      <code class="language-javascript">text</code>. Only use
-                      properly sanitized or otherwise trusted data for
-                      <code class="language-javascript">unsafeHTML</code>.
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>html</td>
+                    <td>toastId</td>
                     <td>String</td>
                     <td>''</td>
                     <td>
                       <p>
-                        (DEPRECATED): will be removed in a later release.
-                      </p>
-                      <p>
-                        HTML content that will be appended to
-                        <code class="language-javascript">text</code>. Only use
-                        properly sanitized or otherwise trusted data for
-                        <code class="language-javascript">html</code>.
-                      </p>
-                      <p>
-                        Will be ignored if
-                        <code class="language-javascript">unsafeHTML</code> is
-                        set.
+                        Id of an HTML element that will be used as tootip content.
                       </p>
                     </td>
                   </tr>
@@ -180,27 +158,34 @@ <h3 class="header">Properties</h3>
             <div id="custom-html" class="section scrollspy">
               <h3 class="header">Custom HTML</h3>
               <p>
-                You can pass in an HTML String as the first argument as well.
-                Take a look at the example below, where we pass in text as well
-                as a flat button. If you call an external function instead of
-                in-line JavaScript, you will not need to escape quotation marks.
-              </p>
-              <p>
-                Only use a properly sanitized or otherwise trusted HTML string.
-              </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.
+              </p>              
               <button
-                type="button"
-                class="waves-effect waves-light btn"
-                onclick="displayCustomHTMLToast()"
-              >
-                Toast with Action
+                  type="button"
+                  class="waves-effect waves-light btn"
+                  onclick="M.toast({toastId: 'my-toast-1'})"
+                >Toast 1!
               </button>
-              <pre><code class="language-javascript">
-  var toastHTML = '&lt;span>I am toast content&lt;/span>&lt;button class="btn-flat toast-action">Undo&lt;/button>';
-  M.toast({unsafeHTML: toastHTML});
-        </code></pre>
+              <div id="my-toast-1" style="display: none;">
+                  This is toast nº1 with a
+                  <a href="https://github.com/materializecss"> link </a>
+              </div>
+              <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-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>
             </div>
-
             <div id="callback" class="scrollspy section">
               <h3 class="header">Callback</h3>
               <p>