功能请求:在Bootstrap中实现带有自动和手动关闭功能的堆叠通知,

ef1yzkbh  于 3个月前  发布在  Bootstrap
关注(0)|答案(1)|浏览(75)

前提条件

建议

在Bootstrap中提供一个名为“堆叠通知”的新功能,使用户能够轻松创建、管理和消除屏幕上垂直堆叠的多个通知。

  • 通知堆叠: 通知将在屏幕右上角以堆叠的形式出现,最新的通知会出现在顶部。
  • 自动消除: 通知可以配置为在一段时间后自动消除。
  • 手动消除: 每个通知都包含一个关闭按钮,允许用户手动消除通知。
  • 清除所有通知: 提供一种一次性清除所有活动通知的方法。

动机和背景

好处:

此功能通过提供一种管理网页上多个通知的简洁方式来增强用户体验。用户可以快速查看和响应通知,而不会重叠或被错过。
此功能特别适用于:

  • Web应用程序: 需要同时显示多个通知的地方,例如错误消息、成功警报或用户提示。
  • 提高可访问性: 通过提供清晰、有序的通知系统,帮助可能因多个弹出窗口或对话框而感到不知所措的用户。
  • 用户控制: 用户可以轻松管理通知,而不会因屏幕上的多个元素而被分心。
    目标用例:
  • 开发者: 可以轻松集成通知系统,而无需从头开始构建。
  • 用户: 需要以无干扰的方式高效管理警报和消息的用户。
  • 网站: 需要实时更新的内容,如 Jmeter 板、管理面板或电子商务网站。

通过实施此功能,Bootstrap可以提供一个强大的通知管理系统,从而改善用户体验和可访问性。

f5emj3cl

f5emj3cl1#

嘿,谢谢你的贡献。
我觉得你提出的功能请求已经在Toasts(将自动隐藏选项设置为false或较长延迟)中部分实现了,只要在Toast容器上使用正确的位置即可。
所以,如果我理解得很好,你是要求一个"关闭所有"按钮,该按钮可以移除给定容器内的所有Toasts。根据我的理解,像这样插入一个按钮应该可以解决问题。我不知道我们是否真的需要这个功能:

document.getElementById('toast-container').children.forEach(child => {
  Toast.getOrCreateInstance(child).hide();
});

这也可能是一个与#38424重复的问题。

相关问题