diff options
author | Mark Otto <markd.otto@gmail.com> | 2021-06-29 18:46:25 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-06-29 18:46:25 +0300 |
commit | 696996dd4f5b7319413655b9134ca2f3768c2549 (patch) | |
tree | 6aa8c9406c2a01107e967f93f76efe809a9a3eff /site/content/docs | |
parent | d314466a4dd00006ce72f46418a98cce3cfccdb2 (diff) |
Add dynamic, live alerts example to docs (#33866)
Diffstat (limited to 'site/content/docs')
-rw-r--r-- | site/content/docs/5.0/components/alerts.md | 39 | ||||
-rw-r--r-- | site/content/docs/5.0/components/toasts.md | 16 |
2 files changed, 54 insertions, 1 deletions
diff --git a/site/content/docs/5.0/components/alerts.md b/site/content/docs/5.0/components/alerts.md index 51feb966ed..e3862de483 100644 --- a/site/content/docs/5.0/components/alerts.md +++ b/site/content/docs/5.0/components/alerts.md @@ -23,6 +23,45 @@ Alerts are available for any length of text, as well as an optional close button {{< partial "callout-warning-color-assistive-technologies.md" >}} {{< /callout >}} +### Live example + +Click the button below to show an alert (hidden with inline styles to start), then dismiss (and destroy) it with the built-in close button. + +<div id="liveAlertPlaceholder"></div> + +<div class="bd-example"> + <button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button> +</div> + +```html +<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button> + +<div class="alert alert-primary alert-dismissible" role="alert" id="liveAlert"> + <strong>Nice!</strong> You've triggered this alert. + <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> +</div> +``` + +We use the following JavaScript to trigger our live alert demo: + +```js +var alertPlaceholder = document.getElementById('liveAlertPlaceholder') +var alertTrigger = document.getElementById('liveAlertBtn') + +function alert(message, type) { + var wrapper = document.createElement('div') + wrapper.innerHTML = '<div class="alert alert-' + type + ' alert-dismissible" role="alert">' + message + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>' + + alertPlaceholder.append(wrapper) +} + +if (alertTrigger) { + alertTrigger.addEventListener('click', function () { + alert('Nice, you triggered this alert message!', 'success') + }) +} +``` + ### Link color Use the `.alert-link` utility class to quickly provide matching colored links within any alert. diff --git a/site/content/docs/5.0/components/toasts.md b/site/content/docs/5.0/components/toasts.md index 2dde09f5ba..8017ecdcd4 100644 --- a/site/content/docs/5.0/components/toasts.md +++ b/site/content/docs/5.0/components/toasts.md @@ -41,7 +41,7 @@ Toasts are as flexible as you need and have very little required markup. At a mi </div> {{< /example >}} -### Live +### Live example Click the button below to show a toast (positioned with our utilities in the lower right corner) that has been hidden by default with `.hide`. @@ -81,6 +81,20 @@ Click the button below to show a toast (positioned with our utilities in the low </div> ``` +We use the following JavaScript to trigger our live toast demo: + +```js +var toastTrigger = document.getElementById('liveToastBtn') +var toastLiveExample = document.getElementById('liveToast') +if (toastTrigger) { + toastTrigger.addEventListener('click', function () { + var toast = new bootstrap.Toast(toastLiveExample) + + toast.show() + }) +} +``` + ### Translucent Toasts are slightly translucent to blend in with what's below them. |