root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 11 Packages Projects Releases Wiki Activity

fix live toast demo (#37590) 

* fix live toast demo

* Fix live toast demo

* Update snippets.js

* Update toasts.md

* Update snippets.js

* Code review comments addressed

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Mark Otto <markdotto@gmail.com>
This commit is contained in:
AucT 2023-01-03 08:06:09 +02:00 committed by GitHub
parent e30916b599
commit 19d547be3d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
site/assets/js/snippets.js
View File

@ -19,7 +19,7 @@
// -------- // --------
// Tooltips // Tooltips
// -------- // --------
// Instantiate all tooltips in a docs or StackBlitz page // Instantiate all tooltips in a docs or StackBlitz
document.querySelectorAll('[data-bs-toggle="tooltip"]') document.querySelectorAll('[data-bs-toggle="tooltip"]')
.forEach(tooltip => { .forEach(tooltip => {
new bootstrap.Tooltip(tooltip) new bootstrap.Tooltip(tooltip)
@ -28,7 +28,7 @@
// -------- // --------
// Popovers // Popovers
// -------- // --------
// Instantiate all popovers in a docs or StackBlitz page // Instantiate all popovers in docs or StackBlitz
document.querySelectorAll('[data-bs-toggle="popover"]') document.querySelectorAll('[data-bs-toggle="popover"]')
.forEach(popover => { .forEach(popover => {
new bootstrap.Popover(popover) new bootstrap.Popover(popover)
@ -49,7 +49,7 @@
}) })
} }
// Instantiate all toasts in a docs page only // Instantiate all toasts in docs pages only
document.querySelectorAll('.bd-example .toast') document.querySelectorAll('.bd-example .toast')
.forEach(toastNode => { .forEach(toastNode => {
const toast = new bootstrap.Toast(toastNode, { const toast = new bootstrap.Toast(toastNode, {
@ -59,14 +59,14 @@
toast.show() toast.show()
}) })
// Instantiate all toasts in a docs page only // Instantiate all toasts in docs pages only
const toastTrigger = document.getElementById('liveToastBtn') const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast') const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
toastTrigger.addEventListener('click', () => {
const toast = new bootstrap.Toast(toastLiveExample)
toast.show() if (toastTrigger) {
const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
toastTrigger.addEventListener('click', () => {
toastBootstrap.show()
}) })
} }
@ -98,7 +98,7 @@
// -------- // --------
// Carousels // Carousels
// -------- // --------
// Instantiate all non-autoplaying carousels in a docs or StackBlitz page // Instantiate all non-autoplaying carousels in docs or StackBlitz
document.querySelectorAll('.carousel:not([data-bs-ride="carousel"])') document.querySelectorAll('.carousel:not([data-bs-ride="carousel"])')
.forEach(carousel => { .forEach(carousel => {
bootstrap.Carousel.getOrCreateInstance(carousel) bootstrap.Carousel.getOrCreateInstance(carousel)

8
site/content/docs/5.3/components/toasts.md
View File

@ -90,11 +90,11 @@ We use the following JavaScript to trigger our live toast demo:
```js ```js
const toastTrigger = document.getElementById('liveToastBtn') const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast') const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
toastTrigger.addEventListener('click', () => {
const toast = new bootstrap.Toast(toastLiveExample)
toast.show() if (toastTrigger) {
const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
toastTrigger.addEventListener('click', () => {
toastBootstrap.show()
}) })
} }
``` ```