rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-28 10:24:19 +01:00
Code Issues Actions Packages Releases Activity

Backport #32760 (#32827)

Browse Source 
Add a live toast example to the docs
This commit is contained in:
XhmikosR 2021-01-18 20:59:59 +02:00 committed by GitHub
parent ee282aff27
commit d2477abecd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 50 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,12 +24,17 @@
$('[data-toggle="popover"]').popover()
$('.toast')
$('.bd-example .toast')
.toast({
autohide: false
})
.toast('show')
// Live toast demo
$('#liveToastBtn').click(function () {
$('#liveToast').toast('show')
})
// Demos within modals
$('.tooltip-test').tooltip()
$('.popover-test').popover()

44
site/content/docs/4.5/components/toasts.md
View File

@ -45,6 +45,50 @@ 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 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
<div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
<div class="toast-header">
{{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}}
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">&times;</span>
</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 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
<div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">&times;</span>
</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. For browsers that support the `backdrop-filter` CSS property, we'll also attempt to blur the elements under a toast.