主题设置

选择强调色与基础色,保存后全站生效。

强调色
基础色
点击切换锁定状态
September 3, 2025

可折叠侧边栏

版本 ^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 标签

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

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

查看侧边栏文档 →

© 2025 FluxProMax™. All Rights Reserved.

备案号:皖ICP备13019729号-11

网站导航