弹出提示框
推送一个带有弹出提示框的通知来给你的访客,它是一个轻量级的,并且容易定制的警告信息。更新于: 2023-04-30 14:28:21 查看: 482
发布于: 2021-9-6 20:35 发布者: 大米
弹出提示框是一种轻量级通知,旨在模仿在移动和桌面操作系统中流行的推送通知。它们是用flex制作的,所以很容易对齐和定位。
概述
当你在使用弹出提示框的时候你需要知道的东西:
- 出于性能考虑,可以选择加入弹出提示框,因此你必须初始化它们。
- 如果您没有指定
autohide: false
, 弹出提示框将自动隐藏
示例
默认提示框
display: flex
,由于我们的边距和flex实用工具,所以可以轻松对齐内容。弹出开框非常的灵活,几乎没有必要的标记内容。最低限度,我们只要求一个元素包含你的“弹出框”的内容,并很大限度的支持取消按钮。
<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>
透明提示框
弹出框也可以是半透明的,所以它们可以混合在任何可能出现的东西上。对于支持 backdrop-filter CSS属性的浏览器,我们还将尝试模糊弹出框下的元素。
<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-header
,并从Bootstrap 图标中添加了一个自定义隐藏图标, 并使用一些flex实用工具来调整布局,从而创建了一个更简单的toast。
<div class="toast d-flex align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body">
Hello, world! This is a toast message.
</div>
<button type="button" class="btn-close ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
另外,您还可以向弹出框中添加其他控件和组件。
<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>
配色方案
在上述示例的基础上,您可以使用我们的颜色工具创建不同的弹出框颜色方案。在这里,我们在 .toast
中 添加了 .bg-primary
和 .text-white
,然后在关闭按钮中添加了 .text-white
。对于清晰的边缘,我们使用 .border-0
删除默认边框。
<div class="toast d-flex align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body">
Hello, world! This is a toast message.
</div>
<button type="button" class="btn-close btn-close-white ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
提示框的定位
根据需要使用自定义CSS放置弹出框。右上角经常用于通知,右上角中间也是如此。如果你每次只显示一个吐司,把定位样式直接放在
.toast
上。
<form>
<div class="form-group 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>
你还可以使用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">
<!-- 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>
JavaScript 行为
用法
通过JavaScript初始化弹出框:
var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
return new bootstrap.Toast(toastEl, option)
})
选项
选项可以通过数据属性或JavaScript传递。对于数据属性,将选项名追加到 data-bs-
,如 data-bs-animation=""
。
名称 | 类型 | 默认 | 描述 |
---|---|---|---|
animation |
boolean | true |
应用一个CSS渐变过渡到弹出框 |
autohide |
boolean | true |
自动隐藏弹出框 |
delay |
number |
5000
|
延迟隐藏弹出框 (ms) |
显示
显示一个元素的弹出框。返回到调用者之前,弹出框实际上已经显示(即在 shown.bs.toast
事件发生之前)。您必须手动调用此方法,否则您的弹出框将不会显示。
toast.show()
隐藏
隐藏元素的弹出框。在弹出框实际上被隐藏之前(即 hidden.bs.toast
事件发生之前)返回给调用者。如果将 autohide
设置为 false
,则必须手动调用此方法。
toast.hide()
处置
隐藏元素的弹出框。你的弹出框将保留在DOM上,但不会再出现了。
toast.dispose()
事件
事件类型 | 描述 |
---|---|
show.bs.toast |
当 show 实例方法被调用时,此事件立即触发。 |
shown.bs.toast |
当弹出框对用户可见时触发此事件。 |
hide.bs.toast |
当 hide 实例方法被调用时,立即触发此事件。 |
hidden.bs.toast |
当弹出框对用户隐藏完毕时,将触发此事件。 |
var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
// do something...
})