通过 toast、轻量级且易于自定义的警报消息向您的访问者推送通知。
Toast 是轻量级通知,旨在模仿移动和桌面操作系统已经普及的推送通知。它们是用 flexbox 构建的,因此它们很容易对齐和定位。
概述
使用 toast 插件时要知道的事情:
- 如果您从源代码构建我们的 JavaScript,它需要
util.js
.
- 出于性能原因,Toast 是可选的,因此您必须自己初始化它们。
- 请注意,您负责放置敬酒。
- 如果你不指定 Toasts 会自动隐藏
autohide: false
。
例子
基本的
为了鼓励可扩展和可预测的 toast,我们建议使用 header 和 body。Toast headers 使用display: flex
,由于我们的 margin 和 flexbox 实用程序,可以轻松对齐内容。
Toast 可以根据您的需要灵活使用,并且所需的标记非常少。至少,我们需要一个元素来包含您的“烤”内容,并强烈建议使用关闭按钮。
半透明
吐司也略带半透明,因此它们融合了它们可能出现的任何东西。对于支持backdrop-filter
CSS 属性的浏览器,我们还将尝试模糊 toast 下的元素。
堆叠
当您有多个 toast 时,我们默认以可读的方式垂直堆叠它们。
放置
根据需要使用自定义 CSS 放置敬酒。右上角通常用于通知,顶部中间也是如此。如果您一次只显示一个 toast,请将定位样式放在.toast
.
对于生成更多通知的系统,请考虑使用包装元素,以便它们可以轻松堆叠。
您还可以使用 flexbox 实用程序来水平和/或垂直对齐 toast。
可访问性
Toast 旨在对您的访问者或用户造成小的干扰,因此为了帮助那些使用屏幕阅读器和类似辅助技术的人,您应该将 Toast 包装在一个aria-live
区域中。屏幕阅读器会自动宣布对活动区域的更改(例如注入/更新 toast 组件),而无需移动用户的焦点或以其他方式打断用户。此外,包括aria-atomic="true"
以确保始终将整个 toast 宣布为单个(原子)单元,而不是宣布更改的内容(如果您只更新 toast 的部分内容,或者如果在稍后的时间点)。如果所需的信息对流程很重要,例如表单中的错误列表,则使用警报组件而不是吐司。
请注意,在生成或更新 toast之前,活动区域需要存在于标记中。如果同时动态生成两者并注入到页面中,一般不会被辅助技术公布。
您还需要根据内容调整role
和aria-live
级别。如果它是一条重要消息,例如错误,请使用role="alert" aria-live="assertive"
,否则使用role="status" aria-live="polite"
属性。
随着您显示的内容发生变化,请务必更新delay
超时时间以确保人们有足够的时间阅读 toast。
使用时autohide: false
,您必须添加一个关闭按钮以允许用户关闭 toast。
JavaScript 行为
用法
通过 JavaScript 初始化 toast:
选项
选项可以通过数据属性或 JavaScript 传递。对于数据属性,将选项名称附加到 中data-
,如data-animation=""
.
姓名 |
类型 |
默认 |
描述 |
动画 |
布尔值 |
真的 |
对 toast 应用 CSS 淡入淡出过渡 |
自动隐藏 |
布尔值 |
真的 |
自动隐藏吐司 |
延迟 |
数字 |
500 |
延迟隐藏 toast (ms) |
方法
$().toast(options)
将 toast 处理程序附加到元素集合。
.toast('show')
显示元素的吐司。在 toast 实际显示之前(即在事件发生之前)返回给调用者。shown.bs.toast
您必须手动调用此方法,而不是您的 toast 不会显示。
.toast('hide')
隐藏元素的吐司。在 toast 实际被隐藏之前(即在事件发生之前)返回给调用者。hidden.bs.toast
如果你做了,你必须手动调用这个autohide
方法false
。
.toast('dispose')
隐藏元素的吐司。您的 toast 将保留在 DOM 上,但不会再显示。
活动
事件类型 |
描述 |
show.bs.toast |
show 调用实例方法时立即触发此事件。 |
显示.bs.toast |
当 toast 对用户可见时触发此事件。 |
隐藏.bs.toast |
hide 调用实例方法时立即触发此事件。 |
hidden.bs.toast |
当 toast 完成对用户隐藏时触发此事件。 |