mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-07 14:16:47 +02:00
Code Issues Releases Wiki Activity

Add toast positioning

Browse Source
This commit is contained in:
Martijn Cuppens
2020-11-29 15:22:15 +01:00
committed by XhmikosR
parent 321ee7a1ad
commit 1f2e600304
4 changed files with 55 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
scss/_toasts.scss
View File

@@ -1,25 +1,17 @@
.toast { .toast {
max-width: $toast-max-width; width: $toast-max-width;
max-width: 100%;
@include font-size($toast-font-size); @include font-size($toast-font-size);
color: $toast-color; color: $toast-color;
pointer-events: auto;
background-color: $toast-background-color; background-color: $toast-background-color;
background-clip: padding-box; background-clip: padding-box;
border: $toast-border-width solid $toast-border-color; border: $toast-border-width solid $toast-border-color;
box-shadow: $toast-box-shadow; box-shadow: $toast-box-shadow;
opacity: 0;
@include border-radius($toast-border-radius); @include border-radius($toast-border-radius);
&:not(:last-child) { &:not(.showing):not(.show) {
margin-bottom: $toast-padding-x; opacity: 0;
}
&.showing {
opacity: 1;
}
&.show {
display: block;
opacity: 1;
} }
&.hide { &.hide {
@@ -27,6 +19,16 @@
} }
} }
.toast-container {
width: max-content;
max-width: 100%;
pointer-events: none;
> :not(:last-child) {
margin-bottom: $toast-spacing;
}
}
.toast-header { .toast-header {
display: flex; display: flex;
align-items: center; align-items: center;

1
scss/_variables.scss
View File

@@ -1108,6 +1108,7 @@ $toast-border-width: 1px !default;
$toast-border-color: rgba(0, 0, 0, .1) !default; $toast-border-color: rgba(0, 0, 0, .1) !default;
$toast-border-radius: $border-radius !default; $toast-border-radius: $border-radius !default;
$toast-box-shadow: $box-shadow !default; $toast-box-shadow: $box-shadow !default;
$toast-spacing: $container-padding-x !default;
$toast-header-color: $gray-600 !default; $toast-header-color: $gray-600 !default;
$toast-header-background-color: rgba($white, .85) !default; $toast-header-background-color: rgba($white, .85) !default;

5
site/assets/scss/_component-examples.scss
View File

@@ -265,6 +265,11 @@
} }
} }
// Toasts
.bd-example-toasts {
min-height: 240px;
}
// //
// Code snippets // Code snippets
// //

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

@@ -13,7 +13,6 @@ Toasts are lightweight notifications designed to mimic the push notifications th
Things to know when using the toast plugin: Things to know when using the toast plugin:
- Toasts are opt-in for performance reasons, so **you must initialize them yourself**. - Toasts are opt-in for performance reasons, so **you must initialize them yourself**.
- **Please note that you are responsible for positioning toasts.**
- Toasts will automatically hide if you do not specify `autohide: false`. - Toasts will automatically hide if you do not specify `autohide: false`.
{{< callout info >}} {{< callout info >}}
@@ -62,30 +61,32 @@ Toasts are slightly translucent, too, so they blend over whatever they might app
### Stacking ### Stacking
When you have multiple toasts, we default to vertically stacking them in a readable manner. You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.
{{< example class="bg-light" >}} {{< example class="bg-light" >}}
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-container">
<div class="toast-header"> <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}} <div class="toast-header">
<strong class="me-auto">Bootstrap</strong> {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
<small class="text-muted">just now</small> <strong class="me-auto">Bootstrap</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> <small class="text-muted">just now</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
See? Just like this.
</div>
</div> </div>
<div class="toast-body">
See? Just like this.
</div>
</div>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header"> <div class="toast-header">
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}} {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
<strong class="me-auto">Bootstrap</strong> <strong class="me-auto">Bootstrap</strong>
<small class="text-muted">2 seconds ago</small> <small class="text-muted">2 seconds ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div> </div>
<div class="toast-body"> <div class="toast-body">
Heads up, toasts will stack automatically Heads up, toasts will stack automatically
</div>
</div> </div>
</div> </div>
{{< /example >}} {{< /example >}}
@@ -134,9 +135,9 @@ Building on the above example, you can create different toast color schemes with
Place toasts with custom CSS as you need them. The top right is often used for notifications, as is the top middle. If you're only ever going to show one toast at a time, put the positioning styles right on the `.toast`. Place toasts with custom CSS as you need them. The top right is often used for notifications, as is the top middle. If you're only ever going to show one toast at a time, put the positioning styles right on the `.toast`.
{{< example class="bg-dark" >}} {{< example class="bg-dark bd-example-toasts p-0">}}
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;"> <div aria-live="polite" aria-atomic="true" class="position-relative">
<div class="toast" style="position: absolute; top: 0; right: 0;"> <div class="toast position-absolute top-0 end-0 m-3">
<div class="toast-header"> <div class="toast-header">
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}} {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
<strong class="me-auto">Bootstrap</strong> <strong class="me-auto">Bootstrap</strong>
@@ -152,10 +153,13 @@ 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. For systems that generate more notifications, consider using a wrapping element so they can easily stack.
{{< example class="bg-dark" >}} {{< example class="bg-dark bd-example-toasts p-0" >}}
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;"> <div aria-live="polite" aria-atomic="true" class="position-relative">
<!-- Position it --> <!-- Position it: -->
<div style="position: absolute; top: 0; right: 0;"> <!-- - `.toast-container` for spacing between toasts -->
<!-- - `.position-absolute`, `top-0` & `end-0` to position the toasts in the upper right corner -->
<!-- - `.m-3` to prevent the toasts from sticking to the edge of the container -->
<div class="toast-container position-absolute top-0 end-0 m-3">
<!-- Then put toasts within --> <!-- Then put toasts within -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
@@ -187,9 +191,9 @@ 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. You can also get fancy with flexbox utilities to align toasts horizontally and/or vertically.
{{< example class="bg-dark" >}} {{< example class="bg-dark bd-example-toasts d-flex" >}}
<!-- Flexbox container for aligning the toasts --> <!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-height: 200px;"> <div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">
<!-- Then put toasts within --> <!-- Then put toasts within -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">