Backport #32760 (#32827)

Add a live toast example to the docs
twbs · Jan 18, 2021 · d2477ab · d2477ab
1 parent ee282af
commit d2477ab
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 1 deletion.
diff --git a/site/assets/js/application.js b/site/assets/js/application.js
@@ -24,12 +24,17 @@
 
     $('[data-toggle="popover"]').popover()
 
-    $('.toast')
+    $('.bd-example .toast')
       .toast({
         autohide: false
       })
       .toast('show')
 
+    // Live toast demo
+    $('#liveToastBtn').click(function () {
+      $('#liveToast').toast('show')
+    })
+
     // Demos within modals
     $('.tooltip-test').tooltip()
     $('.popover-test').popover()

diff --git a/site/content/docs/4.5/components/toasts.md b/site/content/docs/4.5/components/toasts.md
@@ -45,6 +45,50 @@ Toasts are as flexible as you need and have very little required markup. At a mi
 </div>
 {{< /example >}}
 
+### Live
+
+Click the button the below to show as toast (positioning with our utilities in the lower right corner) that has been hidden by default with `.hide`.
+
+<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
+  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
+    <div class="toast-header">
+      {{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}}
+      <strong class="mr-auto">Bootstrap</strong>
+      <small>11 mins ago</small>
+      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
+        <span aria-hidden="true">&times;</span>
+      </button>
+    </div>
+    <div class="toast-body">
+      Hello, world! This is a toast message.
+    </div>
+  </div>
+</div>
+
+<div class="bd-example">
+  <button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
+</div>
+
+```html
+<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
+
+<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
+  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
+    <div class="toast-header">
+      <img src="..." class="rounded mr-2" alt="...">
+      <strong class="mr-auto">Bootstrap</strong>
+      <small>11 mins ago</small>
+      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
+        <span aria-hidden="true">&times;</span>
+      </button>
+    </div>
+    <div class="toast-body">
+      Hello, world! This is a toast message.
+    </div>
+  </div>
+</div>
+```
+
 ### Translucent
 
 Toasts are slightly translucent, too, so they blend over whatever they might appear over. For browsers that support the `backdrop-filter` CSS property, we'll also attempt to blur the elements under a toast.