rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-30 22:52:24 +01:00
Code Issues Actions Packages Releases Activity

Toasts: Change showing timings and classes to keep toast display:none by default (#33610)

Browse Source
This commit is contained in:
GeoSot 2021-07-22 18:13:13 +03:00 committed by GitHub
parent e85a6ed77c
commit 41292a5257
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
js/src/toast.js
View File

@ -35,7 +35,7 @@ const EVENT_SHOW = `show${EVENT_KEY}`
const EVENT_SHOWN = `shown${EVENT_KEY}`
const CLASS_NAME_FADE = 'fade'
const CLASS_NAME_HIDE = 'hide'
const CLASS_NAME_HIDE = 'hide' // @deprecated - kept here only for backwards compatibility
const CLASS_NAME_SHOW = 'show'
const CLASS_NAME_SHOWING = 'showing'
@ -101,15 +101,14 @@ class Toast extends BaseComponent {
const complete = () => {
this._element.classList.remove(CLASS_NAME_SHOWING)
this._element.classList.add(CLASS_NAME_SHOW)
EventHandler.trigger(this._element, EVENT_SHOWN)
this._maybeScheduleHide()
}
this._element.classList.remove(CLASS_NAME_HIDE)
this._element.classList.remove(CLASS_NAME_HIDE) // @deprecated
reflow(this._element)
this._element.classList.add(CLASS_NAME_SHOW)
this._element.classList.add(CLASS_NAME_SHOWING)
this._queueCallback(complete, this._element, this._config.animation)
@ -127,11 +126,13 @@ class Toast extends BaseComponent {
}
const complete = () => {
this._element.classList.add(CLASS_NAME_HIDE)
this._element.classList.add(CLASS_NAME_HIDE) // @deprecated
this._element.classList.remove(CLASS_NAME_SHOWING)
this._element.classList.remove(CLASS_NAME_SHOW)
EventHandler.trigger(this._element, EVENT_HIDDEN)
}
this._element.classList.remove(CLASS_NAME_SHOW)
this._element.classList.add(CLASS_NAME_SHOWING)
this._queueCallback(complete, this._element, this._config.animation)
}

4
scss/_toasts.scss
View File

@ -10,11 +10,11 @@
box-shadow: $toast-box-shadow;
@include border-radius($toast-border-radius);
&:not(.showing):not(.show) {
&.showing {
opacity: 0;
}
&.hide {
&:not(.show) {
display: none;
}
}

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

@ -41,12 +41,16 @@ Toasts are as flexible as you need and have very little required markup. At a mi
</div>
{{< /example >}}
{{< callout warning >}}
Previously, our scripts dynamically added the `.hide` class to completely hide a toast (with `display:none`, rather than just with `opacity:0`). This is now not necessary anymore. However, for backwards compatibility, our script will continue to toggle the class (even though there is no practical need for it) until the next major version.
{{< /callout >}}
### 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`.
Click the button below to show a toast (positioned with our utilities in the lower right corner) that has been hidden by default.
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
<div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
<div id="liveToast" class="toast" 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>
@ -67,7 +71,7 @@ Click the button below to show a toast (positioned with our utilities in the low
<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: 11">
<div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
<div id="liveToast" class="toast" 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>