diff options
Diffstat (limited to '')
| -rw-r--r-- | site/content/docs/5.3/components/toasts.md (renamed from site/content/docs/5.2/components/toasts.md) | 44 |
1 files changed, 17 insertions, 27 deletions
diff --git a/site/content/docs/5.2/components/toasts.md b/site/content/docs/5.3/components/toasts.md index abcb392..a7d1cb7 100644 --- a/site/content/docs/5.2/components/toasts.md +++ b/site/content/docs/5.3/components/toasts.md @@ -16,7 +16,7 @@ Things to know when using the toast plugin: - Toasts will automatically hide if you do not specify `autohide: false`. {{< callout info >}} -{{< partial "callout-info-prefersreducedmotion.md" >}} +{{< partial "callouts/info-prefersreducedmotion.md" >}} {{< /callout >}} ## Examples @@ -27,7 +27,7 @@ To encourage extensible and predictable toasts, we recommend a header and body. Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your "toasted" content and strongly encourage a dismiss button. -{{< example class="bg-light" >}} +{{< example >}} <div 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" >}} @@ -87,17 +87,7 @@ Click the button below to show a toast (positioned with our utilities in the low We use the following JavaScript to trigger our live toast demo: -```js -const toastTrigger = document.getElementById('liveToastBtn') -const toastLiveExample = document.getElementById('liveToast') -if (toastTrigger) { - toastTrigger.addEventListener('click', () => { - const toast = new bootstrap.Toast(toastLiveExample) - - toast.show() - }) -} -``` +{{< js-docs name="live-toast" file="site/assets/js/snippets.js" >}} ### Translucent @@ -108,7 +98,7 @@ Toasts are slightly translucent to blend in with what's below them. <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 class="text-muted">11 mins ago</small> + <small class="text-body-secondary">11 mins ago</small> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> @@ -121,13 +111,13 @@ Toasts are slightly translucent to blend in with what's below them. You can stack toasts by wrapping them in a toast container, which will vertically add some spacing. -{{< example class="bg-light" >}} +{{< example >}} <div class="toast-container position-static"> <div 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> - <small class="text-muted">just now</small> + <small class="text-body-secondary">just now</small> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> @@ -139,7 +129,7 @@ You can stack toasts by wrapping them in a toast container, which will verticall <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 class="text-muted">2 seconds ago</small> + <small class="text-body-secondary">2 seconds ago</small> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> @@ -153,7 +143,7 @@ You can stack toasts by wrapping them in a toast container, which will verticall Customize your toasts by removing sub-components, tweaking them with [utilities]({{< docsref "/utilities/api" >}}), or by adding your own markup. Here we've created a simpler toast by removing the default `.toast-header`, adding a custom hide icon from [Bootstrap Icons]({{< param icons >}}), and using some [flexbox utilities]({{< docsref "/utilities/flex" >}}) to adjust the layout. -{{< example class="bg-light" >}} +{{< example >}} <div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true"> <div class="d-flex"> <div class="toast-body"> @@ -166,7 +156,7 @@ Customize your toasts by removing sub-components, tweaking them with [utilities] Alternatively, you can also add additional controls and components to toasts. -{{< example class="bg-light" >}} +{{< example >}} <div class="toast" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-body"> Hello, world! This is a toast message. @@ -182,7 +172,7 @@ Alternatively, you can also add additional controls and components to toasts. Building on the above example, you can create different toast color schemes with our [color]({{< docsref "/utilities/colors" >}}) and [background]({{< docsref "/utilities/background" >}}) utilities. Here we've added `.text-bg-primary` to the `.toast`, and then added `.btn-close-white` to our close button. For a crisp edge, we remove the default border with `.border-0`. -{{< example class="bg-light" >}} +{{< example >}} <div class="toast align-items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true"> <div class="d-flex"> <div class="toast-body"> @@ -215,7 +205,7 @@ Place toasts with custom CSS as you need them. The top right is often used for n </select> </div> </form> -<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts"> +<div aria-live="polite" aria-atomic="true" class="bg-body-secondary position-relative bd-example-toasts rounded-3"> <div class="toast-container p-3" id="toastPlacement"> <div class="toast"> <div class="toast-header"> @@ -233,7 +223,7 @@ Place toasts with custom CSS as you need them. The top right is often used for n For systems that generate more notifications, consider using a wrapping element so they can easily stack. -{{< example class="bg-dark bd-example-toasts p-0" >}} +{{< example class="bd-example-toasts p-0" >}} <div aria-live="polite" aria-atomic="true" class="position-relative"> <!-- Position it: --> <!-- - `.toast-container` for spacing between toasts --> @@ -246,7 +236,7 @@ For systems that generate more notifications, consider using a wrapping element <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 class="text-muted">just now</small> + <small class="text-body-secondary">just now</small> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> @@ -258,7 +248,7 @@ For systems that generate more notifications, consider using a wrapping element <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 class="text-muted">2 seconds ago</small> + <small class="text-body-secondary">2 seconds ago</small> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> @@ -271,7 +261,7 @@ For systems that generate more notifications, consider using a wrapping element You can also get fancy with flexbox utilities to align toasts horizontally and/or vertically. -{{< example class="bg-dark bd-example-toasts d-flex" >}} +{{< example class="bd-example-toasts d-flex" >}} <!-- Flexbox container for aligning the toasts --> <div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100"> @@ -308,7 +298,7 @@ As the content you're displaying changes, be sure to update the [`delay` timeout When using `autohide: false`, you must add a close button to allow users to dismiss the toast. -{{< example class="bg-light" >}} +{{< example >}} <div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false"> <div class="toast-header"> {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}} @@ -368,7 +358,7 @@ const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, o ### Methods {{< callout danger >}} -{{< partial "callout-danger-async-methods.md" >}} +{{< partial "callouts/danger-async-methods.md" >}} {{< /callout >}} {{< bs-table "table" >}} |