diff options
| author | XhmikosR <[email protected]> | 2021-01-18 20:59:59 +0200 |
|---|---|---|
| committer | GitHub <[email protected]> | 2021-01-18 20:59:59 +0200 |
| commit | d2477abecdf03f242bcb166c463b7ec5ce5fc7bd (patch) | |
| tree | a70b58a109a1eedbe05b9d110d5d8785d05df88e | |
| parent | ee282aff27365835f392ffab91221337c0e24085 (diff) | |
| download | bootstrap-d2477abecdf03f242bcb166c463b7ec5ce5fc7bd.tar.xz bootstrap-d2477abecdf03f242bcb166c463b7ec5ce5fc7bd.zip | |
Backport #32760 (#32827)
Add a live toast example to the docs
| -rw-r--r-- | site/assets/js/application.js | 7 | ||||
| -rw-r--r-- | site/content/docs/4.5/components/toasts.md | 44 |
2 files changed, 50 insertions, 1 deletions
diff --git a/site/assets/js/application.js b/site/assets/js/application.js index 8f0cddd8a..d9f8d1a4a 100644 --- 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 index fd8ea06e8..73e8bc41d 100644 --- 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">×</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">×</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. |