堆叠消息提示

版本 ^2.2.5

你提了需求，我们已实现。Flux 消息提示现在支持堆叠！当多个通知同时出现时，它们会智能重叠，鼠标悬停时展开以显示每条消息——为用户带来更有条理的通知体验。

一起来看看。

快速开始

新的 flux:toast.group 组件包裹常规的 toast 组件以启用堆叠。只需将你的 toast 组件包在一个 group 中：

<flux:toast.group>
    <flux:toast />
</flux:toast.group>

就是这样！当多个通知出现时，你的消息提示将自动堆叠。默认行为会使它们略微重叠，创建清晰的视觉层级，而不会让屏幕显得拥挤。

悬停展开

当你将鼠标悬停在一组堆叠的消息上时，它们会展开以完整显示每条通知。更棒的是，在堆叠展开期间，关闭计时器会暂停，因此用户阅读时消息不会消失。

这确保了用户可以快速浏览多条通知，而不必担心它们在阅读过程中消失。一旦移开光标，堆叠会恢复为紧凑状态，计时器继续。

始终展开

有时你希望所有消息始终可见——无需悬停。针对这种情况，我们加入了 expanded 属性：

<flux:toast.group expanded>
    <flux:toast />
</flux:toast.group>

当 expanded 设为 true 时，你的消息堆叠将始终完整显示每条通知，非常适合需要立刻查看所有消息的应用场景。

位置控制

与单个消息一样，group 组件也支持定位。想把堆叠放在右上角？没问题：

<flux:toast.group position="top end">
    <flux:toast />
</flux:toast.group>

group 会处理所有定位逻辑，确保无论是自底向上滑入还是自顶向下滑入，你的消息动画都正确无误。

开动吧

堆叠动画流畅自然。悬停交互响应灵敏。消息之间的间距恰到好处。而且，它与现有的 toast API 无缝协作——无需更改你的 Flux::toast() 调用。

尽情享用！

查看消息提示文档 →