版本 ^2.3.0

Flux 的侧边栏现在可以在桌面上折叠，以便应用程序拥有更多的屏幕空间，同时保持用户所期望的所有功能。

我们还从头开始重建了整个侧边栏组件系统，使用语义化、专门构建的组件，使得构建一致的侧边栏布局变得轻而易举。

让我们来看看。

桌面端可折叠行为

最大的变化是新的 collapsible 属性，它取代了旧的 stashable 行为。别担心——为了向后兼容，stashable 仍然受支持，但我们建议迁移到 collapsible，因为它更灵活。现在你可以精确控制侧边栏何时以及如何折叠：

<flux:sidebar collapsible>
     <flux:sidebar.header>
         <flux:sidebar.brand logo="/logo.png" name="Acme Inc" />
         <flux:sidebar.collapse />
     </flux:sidebar.header>
     <flux:sidebar.nav>
         <flux:sidebar.item icon="home">仪表板</flux:sidebar.item>
         <flux:sidebar.item icon="inbox" badge="3">消息</flux:sidebar.item>
     </flux:sidebar.nav>
 </flux:sidebar>

当在桌面端折叠时，侧边栏会收缩为仅图标视图，既保留了你的所有导航，又最大化了屏幕可用空间：

用户可以将鼠标悬停在任意导航项上，以工具提示的形式看到其标签，从而确保在折叠状态下的可访问性不受影响。

灵活的折叠选项

collapsible 属性让你能够精确控制侧边栏何时可以折叠：

• collapsible="mobile" - 仅在移动端可折叠

• collapsible - 在移动端和桌面端均可折叠

• 无 collapsible 属性 - 从不折叠（始终可见）

<!-- 仅在移动端折叠 -->
<flux:sidebar collapsible="mobile">
    ...
</flux:sidebar>

<!-- 在移动端和桌面端均可折叠 -->
<flux:sidebar collapsible>
    ...
</flux:sidebar>

可配置的断点

想自定义何时触发“移动端”与“桌面端”的行为吗？新的 breakpoint 属性支持像素值：

<flux:sidebar collapsible breakpoint="768">
    ...
</flux:sidebar>

它可以接受整数（768）、像素字符串（"768px"），甚至 rem 值（"48rem"）。

持久化的用户偏好

侧边栏会在不同会话之间自动记住折叠偏好，并为移动端与桌面端视口分别维护各自的状态。用户可以在桌面端折叠它，切换到移动端，然后返回桌面端时保留其原有偏好。

如果你想禁用该行为，请设置 persist="false"：

<flux:sidebar collapsible persist="false">
    ...
</flux:sidebar>

全新的组件结构

我们使用语义化组件重构了侧边栏，使结构更清晰、更一致：

<flux:sidebar collapsible>
    <flux:sidebar.header>
        <flux:sidebar.brand logo="/logo.png" name="Acme Inc" />
        <flux:sidebar.collapse />
    </flux:sidebar.header>

    <flux:sidebar.search placeholder="搜索..." />

    <flux:sidebar.nav>
        <flux:sidebar.item icon="home" current>仪表板</flux:sidebar.item>
        <flux:sidebar.item icon="users">团队</flux:sidebar.item>
        <flux:sidebar.group expandable heading="项目">
            <flux:sidebar.item>网站改版</flux:sidebar.item>
            <flux:sidebar.item>移动应用</flux:sidebar.item>
        </flux:sidebar.group>
    </flux:sidebar.nav>
 </flux:sidebar>

你现在不再使用像 flux:navlist.item 这样的通用组件，而是使用专门为侧边栏构建的 flux:sidebar.item 组件，它们了解侧边栏上下文，并能在折叠状态下做出恰当响应。

无障碍访问注意事项

我们确保折叠后的侧边栏仍然保持完整的键盘导航与屏幕阅读器支持：

• 所有导航项仍然保留在 Tab 顺序中

• 工具提示为折叠后的导航项提供上下文

• 折叠按钮包含正确的 ARIA 标签

• 在展开与折叠状态之间的焦点管理顺畅无缝

全新的可折叠侧边栏在保持精致且可访问体验的同时，为你的应用带来适应不同屏幕尺寸和用户偏好的灵活性。

查看侧边栏文档 →

版本 ^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() 调用。

尽情享用！

查看消息提示文档 →

版本 ^2.2.0

认识全新的 Popover 组件。这是一个下拉组件，但将“菜单”部分替换为一个通用的 <div>，你可以在里面放任何你想要的内容。

它非常适合自定义筛选器和悬浮卡片等场景。

<flux:dropdown>
    <flux:button>...</flux:button>
    <flux:popover>
        <!-- Put whatever you want in here... -->
    </flux:popover>
</flux:dropdown>

悬停显示

想在用户悬停元素时显示更多信息？只需添加 hover 属性即可。这非常适合用户资料预览、可交互的工具提示，或任何你希望在悬停时显示的上下文信息。

了解更多悬停触发器 →

所有。细节。都不遗漏。

与 Flux 中的其他组件一样，我们对每一个细节都精益求精，绝不放过任何一个角落。

编程式控制：将打开/关闭状态绑定到 Livewire 属性，完全掌控弹出层的显示与隐藏。

<flux:dropdown wire:model="showProfile">
    <flux:button>个人资料</flux:button>
    <flux:popover>...</flux:popover>
</flux:dropdown>

开箱即用的无障碍：如 aria-expanded 等 ARIA 属性将为你自动管理。屏幕阅读器可获得关于弹出层状态及其与触发器关系的完整上下文。

原生浏览器行为：由于我们在底层使用原生的 popover 属性，你将获得随之而来的所有优势——按 Esc 关闭、回车打开、正确的 Tab 顺序，并且当你 Tab 离开时弹出层会自动关闭。

锚点定位：弹出层会智能地定位在触发元素旁。你可以通过 offset、gap、position 和 align 等属性微调一切。

智能边缘检测：如果弹出层在屏幕底部附近打开，它会自动翻转到上方；左/右边缘同理。

溢出处理：当没有足够空间显示完整内容时，弹出层会自动变为可滚动，从而避免内容被裁剪。你的用户始终可以访问其中的全部内容。

所有这些复杂性对开发者来说都是透明的。只需放入组件，它就能在任何地方优雅工作。

查看 Popover 文档以获取更多示例和详细的 API 参考。