diff options
| -rw-r--r-- | site/assets/js/application.js | 12 | ||||
| -rw-r--r-- | site/content/docs/5.0/components/toasts.md | 40 |
2 files changed, 51 insertions, 1 deletions
diff --git a/site/assets/js/application.js b/site/assets/js/application.js index 84774a95d..6ff316056 100644 --- a/site/assets/js/application.js +++ b/site/assets/js/application.js @@ -39,7 +39,7 @@ }) } - document.querySelectorAll('.toast') + document.querySelectorAll('.bd-example .toast') .forEach(function (toastNode) { var toast = new bootstrap.Toast(toastNode, { autohide: false @@ -48,6 +48,16 @@ toast.show() }) + var toastTrigger = document.getElementById('liveToastBtn') + var toastLiveExample = document.getElementById('liveToast') + if (toastTrigger) { + toastTrigger.addEventListener('click', function () { + var toast = new bootstrap.Toast(toastLiveExample) + + toast.show() + }) + } + // Demos within modals document.querySelectorAll('.tooltip-test') .forEach(function (tooltip) { diff --git a/site/content/docs/5.0/components/toasts.md b/site/content/docs/5.0/components/toasts.md index 45cef6f45..eb879b650 100644 --- a/site/content/docs/5.0/components/toasts.md +++ b/site/content/docs/5.0/components/toasts.md @@ -41,6 +41,46 @@ 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 end-0 p-3" style="z-index: 5"> + <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true"> + <div class="toast-header"> + {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}} + <strong class="me-auto">Bootstrap</strong> + <small>11 mins ago</small> + <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 end-0 p-3" style="z-index: 5"> + <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true"> + <div class="toast-header"> + <img src="..." class="rounded me-2" alt="..."> + <strong class="me-auto">Bootstrap</strong> + <small>11 mins ago</small> + <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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. |