mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-12 00:24:03 +02:00
Code Issues Releases Wiki Activity

Add a live toast example to the docs (#32760)

Browse Source
This commit is contained in:
Mark Otto
2021-01-18 05:10:01 -08:00
committed by GitHub
parent bb19b08fbe
commit 4167c107f8
2 changed files with 51 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
site/assets/js/application.js
View File

@@ -39,7 +39,7 @@
}) })
} }
document.querySelectorAll('.toast') document.querySelectorAll('.bd-example .toast')
.forEach(function (toastNode) { .forEach(function (toastNode) {
var toast = new bootstrap.Toast(toastNode, { var toast = new bootstrap.Toast(toastNode, {
autohide: false autohide: false
@@ -48,6 +48,16 @@
toast.show() 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 // Demos within modals
document.querySelectorAll('.tooltip-test') document.querySelectorAll('.tooltip-test')
.forEach(function (tooltip) { .forEach(function (tooltip) {

40
site/content/docs/5.0/components/toasts.md
View File

@@ -41,6 +41,46 @@ Toasts are as flexible as you need and have very little required markup. At a mi
</div> </div>
{{< /example >}} {{< /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 ### Translucent
Toasts are slightly translucent, too, so they blend over whatever they might appear over. Toasts are slightly translucent, too, so they blend over whatever they might appear over.