敬酒
通过 toast、轻量级且易于自定义的警报消息向您的访问者推送通知。
Toast 是轻量级通知,旨在模仿移动和桌面操作系统已经普及的推送通知。它们是用 flexbox 构建的,因此它们很容易对齐和定位。
概述
使用 toast 插件时要知道的事情:
- 出于性能原因,Toast 是可选的,因此您必须自己初始化它们。
- 如果你不指定 Toasts 会自动隐藏
autohide: false
。
prefers-reduced-motion
媒体查询。请参阅
我们可访问性文档的减少运动部分。
例子
基本的
为了鼓励可扩展和可预测的 toast,我们建议使用 header 和 body。Toast headers 使用display: flex
,由于我们的 margin 和 flexbox 实用程序,可以轻松对齐内容。
Toast 可以根据您的需要灵活使用,并且所需的标记非常少。至少,我们需要一个元素来包含您的“烤”内容,并强烈建议使用关闭按钮。
<div 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>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
.hide
类以完全隐藏 toast(使用
display:none
,而不仅仅是使用
opacity:0
)。现在不再需要了。但是,为了向后兼容,我们的脚本将继续切换类(即使实际上没有必要),直到下一个主要版本。
活生生的例子
单击下面的按钮以显示默认隐藏的 toast(与我们的实用程序一起位于右下角)。
<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" 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>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
我们使用以下 JavaScript 来触发我们的现场吐司演示:
var toastTrigger = document.getElementById('liveToastBtn')
var toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
toastTrigger.addEventListener('click', function () {
var toast = new bootstrap.Toast(toastLiveExample)
toast.show()
})
}
半透明
吐司略微半透明,可以与下面的东西融为一体。
<div 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>
<small class="text-muted">11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
堆叠
您可以通过将吐司包装在吐司容器中来堆叠吐司,这将垂直增加一些间距。
<div class="toast-container">
<div 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>
<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 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>
<small class="text-muted">2 seconds ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Heads up, toasts will stack automatically
</div>
</div>
</div>
自定义内容
通过删除子组件、使用实用程序调整它们或添加您自己的标记来自定义您的 toast。在这里,我们通过删除 default 创建了一个更简单的 toast,从Bootstrap Icons.toast-header
添加自定义隐藏图标,并使用一些flexbox 实用程序来调整布局。
<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
Hello, world! This is a toast message.
</div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
或者,您还可以向 toast 添加其他控件和组件。
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body">
Hello, world! This is a toast message.
<div class="mt-2 pt-2 border-top">
<button type="button" class="btn btn-primary btn-sm">Take action</button>
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
</div>
</div>
</div>
配色方案
在上述示例的基础上,您可以使用我们的颜色和背景实用程序创建不同的吐司配色方案。在这里,我们将.bg-primary
和添加.text-white
到.toast
,然后添加.btn-close-white
到我们的关闭按钮。为了获得清晰的边缘,我们使用 删除默认边框.border-0
。
<div class="toast align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
Hello, world! This is a toast message.
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
放置
根据需要使用自定义 CSS 放置敬酒。右上角通常用于通知,顶部中间也是如此。如果您一次只显示一个 toast,请将定位样式放在.toast
.
<form>
<div class="mb-3">
<label for="selectToastPlacement">Toast placement</label>
<select class="form-select mt-2" id="selectToastPlacement">
<option value="" selected>Select a position...</option>
<option value="top-0 start-0">Top left</option>
<option value="top-0 start-50 translate-middle-x">Top center</option>
<option value="top-0 end-0">Top right</option>
<option value="top-50 start-0 translate-middle-y">Middle left</option>
<option value="top-50 start-50 translate-middle">Middle center</option>
<option value="top-50 end-0 translate-middle-y">Middle right</option>
<option value="bottom-0 start-0">Bottom left</option>
<option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
<option value="bottom-0 end-0">Bottom right</option>
</select>
</div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
<div class="toast-container position-absolute p-3" id="toastPlacement">
<div class="toast">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
</div>
对于生成更多通知的系统,请考虑使用包装元素,以便它们可以轻松堆叠。
<div aria-live="polite" aria-atomic="true" class="position-relative">
<!-- Position it: -->
<!-- - `.toast-container` for spacing between toasts -->
<!-- - `.position-absolute`, `top-0` & `end-0` to position the toasts in the upper right corner -->
<!-- - `.p-3` to prevent the toasts from sticking to the edge of the container -->
<div class="toast-container position-absolute top-0 end-0 p-3">
<!-- Then put toasts within -->
<div 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>
<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 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>
<small class="text-muted">2 seconds ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Heads up, toasts will stack automatically
</div>
</div>
</div>
</div>
您还可以使用 flexbox 实用程序来水平和/或垂直对齐 toast。
<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">
<!-- Then put toasts within -->
<div 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>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
可访问性
Toast 旨在对您的访问者或用户造成小的干扰,因此为了帮助那些使用屏幕阅读器和类似辅助技术的人,您应该将 Toast 包装在一个aria-live
区域中。屏幕阅读器会自动宣布对活动区域的更改(例如注入/更新 toast 组件),而无需移动用户的焦点或以其他方式打断用户。此外,包括aria-atomic="true"
以确保始终将整个 toast 宣布为单个(原子)单元,而不是仅仅宣布更改的内容(如果您只更新 toast 的部分内容,或者显示相同的 toast 内容,这可能会导致问题在稍后的时间点)。如果所需的信息对流程很重要,例如表单中的错误列表,则使用警报组件而不是吐司。
请注意,在生成或更新 toast之前,活动区域需要存在于标记中。如果同时动态生成两者并注入到页面中,一般不会被辅助技术公布。
您还需要根据内容调整role
和aria-live
级别。如果它是一条重要消息,例如错误,请使用role="alert" aria-live="assertive"
,否则使用role="status" aria-live="polite"
属性。
随着您显示的内容发生变化,请务必更新delay
超时,以便用户有足够的时间阅读 toast。
<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-bs-delay="10000">
<div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>
使用时autohide: false
,您必须添加一个关闭按钮以允许用户关闭 toast。
<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
虽然从技术上讲,可以在 toast 中添加可聚焦/可操作的控件(例如附加按钮或链接),但您应该避免为自动隐藏 toast 执行此操作。即使您让 toast 长时间delay
超时,键盘和辅助技术用户也可能会发现很难及时到达 toast 以采取行动(因为 toast 在显示时不会获得焦点)。如果您绝对必须有进一步的控制,我们建议使用带有autohide: false
.
萨斯
变量
$toast-max-width: 350px;
$toast-padding-x: .75rem;
$toast-padding-y: .5rem;
$toast-font-size: .875rem;
$toast-color: null;
$toast-background-color: rgba($white, .85);
$toast-border-width: 1px;
$toast-border-color: rgba($black, .1);
$toast-border-radius: $border-radius;
$toast-box-shadow: $box-shadow;
$toast-spacing: $container-padding-x;
$toast-header-color: $gray-600;
$toast-header-background-color: rgba($white, .85);
$toast-header-border-color: rgba($black, .05);
用法
通过 JavaScript 初始化 toast:
var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
return new bootstrap.Toast(toastEl, option)
})
触发器
可以使用toastdata
中按钮上的属性来实现解雇,如下所示:
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
或在toast 外部的按钮上使用data-bs-target
如下所示:
<button type="button" class="btn-close" data-bs-dismiss="toast" data-bs-target="#my-toast" aria-label="Close"></button>
选项
选项可以通过数据属性或 JavaScript 传递。对于数据属性,将选项名称附加到 中data-bs-
,如data-bs-animation=""
.
姓名 | 类型 | 默认 | 描述 |
---|---|---|---|
animation |
布尔值 | true |
对 toast 应用 CSS 淡入淡出过渡 |
autohide |
布尔值 | true |
自动隐藏吐司 |
delay |
数字 | 5000 |
延迟隐藏 toast (ms) |
方法
节目
显示元素的吐司。在 toast 实际显示之前(即在事件发生之前)返回给调用者。shown.bs.toast
您必须手动调用此方法,而不是您的 toast 不会显示。
toast.show()
隐藏
隐藏元素的 toast。在 toast 实际被隐藏之前(即在事件发生之前)返回给调用者。hidden.bs.toast
如果你做了,你必须手动调用这个autohide
方法false
。
toast.hide()
处置
隐藏元素的 toast。您的 toast 将保留在 DOM 上,但不会再显示。
toast.dispose()
获取实例
允许您获取与 DOM 元素关联的 toast 实例的静态方法
var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance
获取或创建实例
静态方法,允许您获取与 DOM 元素关联的 toast 实例,或创建一个新实例以防它未初始化
var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance
活动
事件类型 | 描述 |
---|---|
show.bs.toast |
show 调用实例方法时立即触发此事件。 |
shown.bs.toast |
当 toast 对用户可见时触发此事件。 |
hide.bs.toast |
hide 调用实例方法时立即触发此事件。 |
hidden.bs.toast |
当 toast 完成对用户隐藏时触发此事件。 |
var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
// do something...
})