From 5f6dd9d8815785c38b55c95ce5f6444be0da6e0d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 11 Jan 2021 14:52:38 -0800 Subject: [PATCH 1/7] Add a live toast example to the docs --- site/assets/js/application.js | 12 +++++++++++- site/content/docs/5.0/components/toasts.md | 22 ++++++++++++++++++++++ 2 files changed, 33 insertions(+), 1 deletion(-) 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 b6f7e3893..9f51c4099 100644 --- a/site/content/docs/5.0/components/toasts.md +++ b/site/content/docs/5.0/components/toasts.md @@ -41,6 +41,28 @@ Toasts are as flexible as you need and have very little required markup. At a mi {{< /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`. + +
+ +
+ +{{< example >}} + +{{< /example >}} + ### 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. From 5405da8a8ab77d75b04e26f359536e0237f529a7 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 13 Jan 2021 17:12:44 -0800 Subject: [PATCH 2/7] Add toast code to the snippet --- site/content/docs/5.0/components/toasts.md | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/site/content/docs/5.0/components/toasts.md b/site/content/docs/5.0/components/toasts.md index 9f51c4099..9d7b6f9dc 100644 --- a/site/content/docs/5.0/components/toasts.md +++ b/site/content/docs/5.0/components/toasts.md @@ -59,9 +59,27 @@ Click the button the below to show as toast (positioning with our utilities in t -{{< example >}} +
+ +
+ +{{< highlight html >}} -{{< /example >}} + +
+ +
+{{< endhighlight >}} ### Translucent From 5f5be8a35c43726289c4af6fabe6b36dc5af4b84 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 13 Jan 2021 17:54:48 -0800 Subject: [PATCH 3/7] Triple backtick code --- site/content/docs/5.0/components/toasts.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/content/docs/5.0/components/toasts.md b/site/content/docs/5.0/components/toasts.md index 9d7b6f9dc..50dd20371 100644 --- a/site/content/docs/5.0/components/toasts.md +++ b/site/content/docs/5.0/components/toasts.md @@ -63,7 +63,7 @@ Click the button the below to show as toast (positioning with our utilities in t -{{< highlight html >}} +```html
@@ -79,7 +79,7 @@ Click the button the below to show as toast (positioning with our utilities in t
-{{< endhighlight >}} +``` ### Translucent From f78ec2507b789393dacc05bf64871df7d82aa022 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 13 Jan 2021 17:58:59 -0800 Subject: [PATCH 4/7] Fix placeholder image --- site/content/docs/5.0/components/toasts.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/docs/5.0/components/toasts.md b/site/content/docs/5.0/components/toasts.md index 50dd20371..dc9142418 100644 --- a/site/content/docs/5.0/components/toasts.md +++ b/site/content/docs/5.0/components/toasts.md @@ -69,7 +69,7 @@ Click the button the below to show as toast (positioning with our utilities in t