Bootstrap/docs/4.5/components/toasts

在GitHub上查看

敬酒

通过敬酒,轻便且易于自定义的警报消息向访客推送通知。

敬酒是一种轻量级的通知,旨在模仿已被移动和桌面操作系统普及的推送通知。 它们是使用flexbox构建的,因此易于对齐和定位。

概观

使用Toast插件时要了解的事项：

• 如果您是从源代码构建JavaScript, 要求 util.js.
• 出于性能原因选择参加吐司,因此 你必须自己初始化它们 .
• 请注意,您负责摆放烤面包。
• 如果不指定,吐司将自动隐藏 autohide: false.

该组件的动画效果取决于 prefers-reduced-motion 媒体查询。 见 辅助功能文档中的慢动部分 .

例子

基本

为了鼓励可扩展的面包,我们建议使用标题和正文。 吐司标题使用 display: flex ,借助我们的margin和flexbox实用程序,可以轻松对齐内容。

吐司随您需要而灵活,几乎不需要标记。 至少,我们需要一个元素来包含您的“敬酒”内容,并强烈建议您使用关闭按钮。

引导 11分钟前 ×

你好,世界！ 这是一个祝酒词。

<div aria-atomic="true" aria-live="assertive" class="toast" role="alert">
<div class="toast-header">
<svg class="bd-placeholder-img rounded mr-2" focusable="false" height="20" preserveaspectratio="xMidYMid slice" role="img" width="20" xmlns="http://www.w3.org/2000/svg"><rect fill="#007aff" height="100%" width="100%"></rect></svg>
<strong class="mr-auto"> 引导 </strong>
<small> 11分钟前 </small>
<button aria-label="Close" class="ml-2 mb-1 close" data-dismiss="toast" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body"> 你好,世界！  这是一个祝酒词。 </div>
</div>

半透明

吐司也有点半透明,因此它们融合了所有可能出现的东西。 对于支持 backdrop-filter CSS属性,我们还将尝试模糊吐司下的元素。

引导 11分钟前 ×

你好,世界！ 这是一个祝酒词。

<div aria-atomic="true" aria-live="assertive" class="toast" role="alert">
<div class="toast-header">
<svg class="bd-placeholder-img rounded mr-2" focusable="false" height="20" preserveaspectratio="xMidYMid slice" role="img" width="20" xmlns="http://www.w3.org/2000/svg"><rect fill="#007aff" height="100%" width="100%"></rect></svg>
<strong class="mr-auto"> 引导 </strong>
<small class="text-muted"> 11分钟前 </small>
<button aria-label="Close" class="ml-2 mb-1 close" data-dismiss="toast" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body"> 你好,世界！  这是一个祝酒词。 </div>
</div>

堆码

当您有多个烤面包时,我们默认以可读的方式垂直堆叠它们。

引导 现在 ×

See? 像这样。

引导 2秒前 ×

抬起头,吐司将自动堆叠

<div aria-atomic="true" aria-live="assertive" class="toast" role="alert">
<div class="toast-header">
<svg class="bd-placeholder-img rounded mr-2" focusable="false" height="20" preserveaspectratio="xMidYMid slice" role="img" width="20" xmlns="http://www.w3.org/2000/svg"><rect fill="#007aff" height="100%" width="100%"></rect></svg>
<strong class="mr-auto"> 引导 </strong>
<small class="text-muted"> 现在 </small>
<button aria-label="Close" class="ml-2 mb-1 close" data-dismiss="toast" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body"> See?  像这样。 </div>
</div>
<div aria-atomic="true" aria-live="assertive" class="toast" role="alert">
<div class="toast-header">
<svg class="bd-placeholder-img rounded mr-2" focusable="false" height="20" preserveaspectratio="xMidYMid slice" role="img" width="20" xmlns="http://www.w3.org/2000/svg"><rect fill="#007aff" height="100%" width="100%"></rect></svg>
<strong class="mr-auto"> 引导 </strong>
<small class="text-muted"> 2秒前 </small>
<button aria-label="Close" class="ml-2 mb-1 close" data-dismiss="toast" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body"> 抬起头,吐司将自动堆叠 </div>
</div>

放置

根据需要使用自定义CSS放置烤面包。 右上角通常用于通知,顶部中间也是如此。 如果您一次只想展示一个烤面包,请将定位样式正确地放在 .toast.

引导 11分钟前 ×

你好,世界！ 这是一个祝酒词。

<div aria-atomic="true" aria-live="polite" style="position: relative; min-height: 200px;">
<div class="toast" style="position: absolute; top: 0; right: 0;">
<div class="toast-header">
<svg class="bd-placeholder-img rounded mr-2" focusable="false" height="20" preserveaspectratio="xMidYMid slice" role="img" width="20" xmlns="http://www.w3.org/2000/svg"><rect fill="#007aff" height="100%" width="100%"></rect></svg>
<strong class="mr-auto"> 引导 </strong>
<small> 11分钟前 </small>
<button aria-label="Close" class="ml-2 mb-1 close" data-dismiss="toast" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body"> 你好,世界！  这是一个祝酒词。 </div>
</div>
</div>

对于生成更多通知的系统,请考虑使用包装元素,以便它们可以轻松堆叠。

定位它

然后放入烤面包

引导 现在 ×

See? 像这样。

引导 2秒前 ×

抬起头,吐司将自动堆叠

<div aria-atomic="true" aria-live="polite" style="position: relative; min-height: 200px;">
 定位它 
<div style="position: absolute; top: 0; right: 0;">
 然后放入烤面包 
<div aria-atomic="true" aria-live="assertive" class="toast" role="alert">
<div class="toast-header">
<svg class="bd-placeholder-img rounded mr-2" focusable="false" height="20" preserveaspectratio="xMidYMid slice" role="img" width="20" xmlns="http://www.w3.org/2000/svg"><rect fill="#007aff" height="100%" width="100%"></rect></svg>
<strong class="mr-auto"> 引导 </strong>
<small class="text-muted"> 现在 </small>
<button aria-label="Close" class="ml-2 mb-1 close" data-dismiss="toast" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body"> See?  像这样。 </div>
</div>
<div aria-atomic="true" aria-live="assertive" class="toast" role="alert">
<div class="toast-header">
<svg class="bd-placeholder-img rounded mr-2" focusable="false" height="20" preserveaspectratio="xMidYMid slice" role="img" width="20" xmlns="http://www.w3.org/2000/svg"><rect fill="#007aff" height="100%" width="100%"></rect></svg>
<strong class="mr-auto"> 引导 </strong>
<small class="text-muted"> 2秒前 </small>
<button aria-label="Close" class="ml-2 mb-1 close" data-dismiss="toast" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body"> 抬起头,吐司将自动堆叠 </div>
</div>
</div>
</div>

您还可以使用flexbox实用程序来使烤面包水平和/或垂直对齐。

Flexbox容器,用于对齐吐司

然后放入烤面包

引导 11分钟前 ×

你好,世界！ 这是一个祝酒词。

 Flexbox容器,用于对齐吐司 
<div aria-atomic="true" aria-live="polite" class="d-flex justify-content-center align-items-center" style="height: 200px;">
 然后放入烤面包 
<div aria-atomic="true" aria-live="assertive" class="toast" role="alert">
<div class="toast-header">
<svg class="bd-placeholder-img rounded mr-2" focusable="false" height="20" preserveaspectratio="xMidYMid slice" role="img" width="20" xmlns="http://www.w3.org/2000/svg"><rect fill="#007aff" height="100%" width="100%"></rect></svg>
<strong class="mr-auto"> 引导 </strong>
<small> 11分钟前 </small>
<button aria-label="Close" class="ml-2 mb-1 close" data-dismiss="toast" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body"> 你好,世界！  这是一个祝酒词。 </div>
</div>
</div>

无障碍

吐司对您的访问者或用户来说只是一个小小的干扰,因此,为了帮助那些使用屏幕阅读器和类似辅助技术的人,您应该将吐司包装在 aria-live 区域 。屏幕阅读器会自动宣布对活动区域的更改（例如注入/更新吐司组件）,而无需移动用户的焦点或以其他方式打扰用户。 此外,包括 aria-atomic="true" 以确保整个烤面包始终以单个（原子）单位宣布,而不是宣布已更改的内容（如果仅更新部分烤面包的内容,或者稍后显示相同的烤面包内容,则可能会导致问题及时）。 如果所需的信息对于该过程很重要,例如 查看表单中的错误列表,然后使用 警报组件 而不是烤面包。

请注意,实时区域需要出现在标记中 之前 吐司已生成或更新。 如果您同时动态生成两者并将它们注入页面,则辅助技术通常不会宣布它们。

您还需要适应 role and aria-live 级别取决于内容。 如果是重要消息（例如错误）,请使用 role="alert" aria-live="assertive" ,否则使用 role="status" aria-live="polite" 属性。

随着您显示的内容发生变化,请确保更新 delay 超时 确保人们有足够的时间阅读吐司。

使用时 autohide: false ,您必须添加一个关闭按钮,以允许用户消除敬酒。

引导 11分钟前 ×

你好,世界！ 这是一个祝酒词。

<div aria-atomic="true" aria-live="assertive" class="toast" data-autohide="false" role="alert">
<div class="toast-header">
<svg class="bd-placeholder-img rounded mr-2" focusable="false" height="20" preserveaspectratio="xMidYMid slice" role="img" width="20" xmlns="http://www.w3.org/2000/svg"><rect fill="#007aff" height="100%" width="100%"></rect></svg>
<strong class="mr-auto"> 引导 </strong>
<small> 11分钟前 </small>
<button aria-label="Close" class="ml-2 mb-1 close" data-dismiss="toast" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body"> 你好,世界！  这是一个祝酒词。 </div>
</div>

JavaScript行为

用法

通过JavaScript初始化敬酒：

选项

可以通过数据属性或JavaScript传递选项。 对于数据属性,将选项名称附加到 data- ,如 data-animation="".

Name	Type	默认	描述
动画	布尔	true	将CSS淡入淡出过渡应用于烤面包
自动隐藏	布尔	true	自动隐藏吐司
延迟	数	500	延迟隐藏吐司（ms）

方法

异步方法和转换

所有API方法都是 异步 然后开始 过渡 。转换开始后,他们会立即返回给呼叫者,但 在结束之前 。此外,在 过渡组件将被忽略 .

有关更多信息,请参见我们的JavaScript文档。 .

$().toast(options)

将Toast处理程序附加到元素集合。

.toast('show')

显示元素的吐司。 在实际显示吐司之前返回呼叫者 （即 之前 shown.bs.toast 事件发生）。 您必须手动调用此方法,否则不会显示吐司。

.toast('hide')

隐藏元素的吐司。 在烤面包被隐藏之前返回到调用者 （即 之前 hidden.bs.toast 事件发生）。 您必须手动调用此方法 autohide to false.

.toast('dispose')

隐藏元素的吐司。 您的敬酒将保留在DOM上,但不再显示。

活动

事件类型	描述
show.bs.toast	当 show 实例方法被调用。
如图所示	当用户看到烤面包时会触发此事件。
hide.bs.吐司	当 hide 实例方法已被调用。
隐藏的面包吐司	当烤面包结束向用户隐藏时,将触发此事件。