前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载本文以 rsuite 文档中 Sidenav footer 示例 为骨架讲解如何用Sidenav、Nav、Sidenav.Toggle以及HStack/VStack/InputGroup等布局组件构建一个带品牌区、搜索框与折叠开关的完整侧边导航栏。读完本文你将掌握 Sidenav 三段式结构Header / Body / Footer的组装方式、expanded受控状态的切换原理以及折叠态下组件如何联动响应并能在自己的 React 项目中直接复刻这套代码。一、示例目标一个可折叠的完整侧边栏docs/pages/components/sidenav/fragments/footer.md给出的示例是一个典型的后台管理系统侧边栏顶部是品牌 Logo 与搜索框中间是五个带图标的导航菜单项底部是展开/折叠切换按钮。整体结构如下Box w{240} Sidenav expanded{expanded} Sidenav.Header Header expanded{expanded} / /Sidenav.Header Sidenav.Body Nav Nav.Item icon{DashboardIcon /}Overview/Nav.Item {/* ... 其余菜单项 */} /Nav /Sidenav.Body Sidenav.Footer Sidenav.Toggle onToggle{setExpanded} / /Sidenav.Footer /Sidenav /Box在这个示例中Box w{240}为侧边栏设置了固定宽度容器expanded是一个React.useState(true)管理的受控状态由Sidenav.Toggle的onToggle回调驱动更新。从 src/Sidenav/Sidenav.tsx 源码可以看到Sidenav的expanded属性默认值为true并通过Transitiontimeout{300}为宽度变化提供 300ms 的折叠/展开过渡动画。二、三段式结构Header / Body / Footer 的职责划分Sidenav组件通过静态子组件Subcomponents挂载了Header、Body、Footer、GroupLabel、Toggle五个子组件见 src/Sidenav/Sidenav.tsx。其中Header、Body、Footer本身是纯粹的结构化容器由createComponent生成为普通div元素见 SidenavHeader.tsx、SidenavBody.tsx、SidenavFooter.tsx真正的行为逻辑由Nav与Sidenav.Toggle承载。1. Header品牌区与搜索框的折叠联动示例中的Header是一个自定义组件根据expanded状态切换渲染内容const Header ({ expanded }) { if (!expanded) { return ( HStack justifyContentcenter SiProtondb size{32} / /HStack ); } return ( VStack p10px 10px 0 10px spacing{12} HStack SiProtondb size{32} / Brand /HStack InputGroup inside sizesm InputGroup.Addon SearchIcon / /InputGroup.Addon Input typesearch placeholderSearch here... / /InputGroup /VStack ); };折叠态expanded false只居中显示品牌图标避免在窄条侧边栏中撑开宽度。展开态使用VStack垂直排列组合「品牌名 搜索框」spacing{12}控制垂直间距InputGroup inside实现图标内嵌的搜索输入框配合rsuite/icons/Search图标。搜索框在折叠时被移除这是侧边栏折叠设计的常见做法因为 52px 宽的窄条无法容纳输入控件。对应样式上src/Sidenav/styles/index.scss中.rs-sidenav-header通过padding: var(--rs-sidenav-header-p)控制内边距而折叠态.rs-sidenav-collapse-out会隐藏所有.rs-sidenav-item-title文本仅保留居中的图标。2. Body菜单导航的核心区域Sidenav.Body内部渲染Nav组件及五个Nav.Item每个菜单项都通过icon属性挂载rsuite/icons图标Nav Nav.Item icon{DashboardIcon /}Overview/Nav.Item Nav.Item icon{PeoplesIcon /}Customers/Nav.Item Nav.Item icon{PieChartIcon /}Analytics/Nav.Item Nav.Item icon{DataAuthorizeIcon /}Security/Nav.Item Nav.Item icon{SettingIcon /}Settings/Nav.Item /Nav从样式源码看.rs-sidenav-body采用flex: 1 1 auto; overflow: auto保证菜单区域在侧边栏中自动撑满剩余高度并在内容超长时可滚动折叠时.rs-sidenav-collapse-out .rs-sidenav-body则改为overflow: inherit让下拉子菜单可以溢出显示。折叠态下.rs-sidenav-item会通过justify-content: center与height: var(--rs-sidenav-item-height)36px实现图标垂直居中的窄条样式并隐藏文字标题。3. Footer折叠开关的挂载位置Sidenav.Footer在样式上拥有自己的职责src/Sidenav/styles/index.scss中.rs-sidenav-footer设置了border-top: 1px solid上边框、margin-top: auto推到容器底部以及padding: var(--rs-sidenav-footer-p)。示例将Sidenav.Toggle放在此处视觉上形成「菜单列表 → 分隔线 → 折叠按钮」的经典底栏布局。三、Sidenav.Toggle折叠开关的工作原理Sidenav.Toggle是本示例的核心交互元素其实现位于 src/Sidenav/SidenavToggle.tsxconst sidenav useContext(SidenavContext); if (!sidenav) { console.error(Sidenav.Toggle must be rendered within a Sidenav); return null; } const expanded sidenav.expanded; const handleToggle useEventCallback((event) { onToggle?.(!expanded, event); onClick?.(event); }); return ( IconButton icon{ArrowLeftLineIcon aria-label /} onClick{handleToggle} aria-label{expanded ? Collapse : Expand} {...rest} / );几个关键实现细节依赖 Sidenav ContextSidenav.Toggle通过useContext(SidenavContext)读取expanded状态。若被渲染在Sidenav之外会输出错误信息并返回null。SidenavContext在 src/Sidenav/SidenavContext.tsx 中定义由Sidenav在渲染时通过SidenavContext.Provider注入expanded、openKeys、onOpenChange等值。受控回调点击按钮时调用onToggle(!expanded, event)。示例中的onToggle{setExpanded}直接把新的展开状态写回 React state实现真正的受控折叠。无障碍支持按钮的aria-label随状态切换为Collapse或Expand折叠时图标ArrowLeftLineIcon旋转 180°样式见.rs-sidenav-toggle-collapsed .rs-icon。图标动画.rs-sidenav-toggle的图标transition: transform 0.3s ease折叠/展开时箭头平滑旋转。在 SidenavToggle 测试 中验证了这些行为展开态渲染Collapse按钮、折叠态渲染Expand按钮、点击触发onToggle(false, event)以及脱离Sidenav渲染时抛出错误。四、样式与动画折叠如何“动”起来侧边栏的宽度切换并非瞬间完成而是由 src/Sidenav/Sidenav.tsx 中的Transition组件驱动根据expanded状态在展开collapse-in、折叠collapse-out与过渡collapsing三种 className 间切换。对应的样式定义在 src/Sidenav/styles/index.scssCSS 变量默认值作用--rs-sidenav-width52px折叠态侧边栏宽度--rs-sidenav-collapse-in-width100%展开态宽度撑满容器--rs-sidenav-collapse-transition0.15s ease-in宽度过渡时长与缓动--rs-sidenav-item-height36px折叠态菜单项高度--rs-sidenav-header-p/--rs-sidenav-footer-p派生自--rs-sidenav-pHeader / Footer 内边距展开态.rs-sidenav-collapse-in将宽度设为100%菜单文字、搜索框等全部可见折叠态.rs-sidenav-collapse-out将宽度收缩到52px文字通过sideNavFoldedText关键帧动画淡出max-width200px → 0透明度 0.8 → 0折叠后的下拉菜单.rs-dropdown-menu会脱离窄条以浮层形式从inset-inline-start: 28px位置展开——这正是示例中折叠后仅剩图标、点击可弹出子菜单的基础。需要说明的是示例中的Box w{240}是侧边栏展开时的容器宽度实际项目中也可以让Sidenav直接占据布局宽度并通过expanded切换实现「宽 240px ⇆ 窄 52px」的布局自适应。五、完整可运行示例将示例中的ReactDOM.render替换为现代 React 的createRoot后完整代码可直接运行需安装rsuite、rsuite/icons、react-iconsimport { useState } from react; import DashboardIcon from rsuite/icons/Dashboard; import PeoplesIcon from rsuite/icons/Peoples; import SettingIcon from rsuite/icons/Setting; import PieChartIcon from rsuite/icons/PieChart; import DataAuthorizeIcon from rsuite/icons/DataAuthorize; import SearchIcon from rsuite/icons/Search; import { Sidenav, Nav, HStack, VStack, Input, InputGroup, Box } from rsuite; import { SiProtondb } from react-icons/si; const Header ({ expanded }) { if (!expanded) { return ( HStack justifyContentcenter SiProtondb size{32} / /HStack ); } return ( VStack p10px 10px 0 10px spacing{12} HStack SiProtondb size{32} / Brand /HStack InputGroup inside sizesm InputGroup.Addon SearchIcon / /InputGroup.Addon Input typesearch placeholderSearch here... / /InputGroup /VStack ); }; const App () { const [expanded, setExpanded] useState(true); return ( Box w{240} Sidenav expanded{expanded} Sidenav.Header Header expanded{expanded} / /Sidenav.Header Sidenav.Body Nav Nav.Item icon{DashboardIcon /}Overview/Nav.Item Nav.Item icon{PeoplesIcon /}Customers/Nav.Item Nav.Item icon{PieChartIcon /}Analytics/Nav.Item Nav.Item icon{DataAuthorizeIcon /}Security/Nav.Item Nav.Item icon{SettingIcon /}Settings/Nav.Item /Nav /Sidenav.Body Sidenav.Footer Sidenav.Toggle onToggle{setExpanded} / /Sidenav.Footer /Sidenav /Box ); }; export default App;六、进阶折叠态下的菜单与状态管理Sidenav不止于视觉折叠还通过openKeys机制管理多级菜单的展开状态defaultOpenKeys非受控模式下默认展开的菜单eventKey数组openKeysonOpenChange受控模式下由外部接管菜单开合折叠态下点击带有子菜单的菜单项时会以浮层 Tooltip 形式展示子菜单——这在 Sidenav 测试 中有明确验证mouseOver弹出tooltip点击后关闭。此外appearance属性支持default | inverse | subtle三种风格分别对应 styles/index.scss 中的默认浅色、深色反白与透明背景三套样式均通过data-appearance属性区分。activeKey与onSelect已标记为deprecated官方建议改用Nav activeKey与Nav onSelect见 src/Sidenav/Sidenav.tsx示例代码中正是采用「在Sidenav.Body内放Nav」的推荐写法路由切换时只需给Nav传入activeKey即可高亮当前菜单。七、总结footer.md示例演示了 rsuiteSidenav组件的完整三段式组装Sidenav.Header承载品牌与搜索随expanded联动显隐Sidenav.Body承载Nav菜单Sidenav.Footer挂载Sidenav.Toggle完成折叠开关。其背后是SidenavContext对expanded的共享注入、Transition组件的 300ms 动画驱动以及 CSS 变量与关键帧动画对窄条折叠态的样式支撑。掌握这套模式后你可以轻松在管理后台、数据看板等场景中快速落地一个可折叠、可无障碍操作的侧边导航。相关源码索引Sidenav 主组件、Sidenav.Toggle、SidenavContext、Sidenav 样式、Sidenav 测试赞分享前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载相关推荐rsuite Sidenav 受控展开与折叠从 Toggle 到源码级实现解析rsuite Sidenav 受控展开与折叠从 Toggle 到源码级实现解析 Sidenav侧边导航栏是 rsuite 中用于页面侧边栏导航的核心组件前端UI组件RSuite Sidenav 组件完整指南构建可折叠、可定制、多级分组的页面侧边栏导航RSuite Sidenav 组件完整指南构建可折叠、可定制、多级分组的页面侧边栏导航 Sidenav 是 RSuite 中对页面侧边栏场景下的 Nav 导航前端UI组件RSuite Navbar 导航栏组件基础用法从 Brand 到响应式布局的完整实战RSuite Navbar 导航栏组件基础用法从 Brand 到响应式布局的完整实战 导读 本文以 RSuite 官方文档中 Navbar 组件的基础示例前端UI组件上一篇Argo Workflows Inputs 机制全解析模板间参数、工件与卷的传递模型含 Java SDK 类型说明下一篇PHP-CS-Fixer numeric_literal_separator 规则完全指南为数字字面量自动添加/移除下划线分隔符创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考