前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载导读Sidenav 是 rsuite 中对页面侧边栏Nav组件的一层封装专门用于构建后台管理系统、控制台类应用中最常见的左侧导航 主内容区布局。本文以官方文档为主体完整覆盖 Sidenav 的获取方式、九类典型用法场景以及全部 Props 参数并结合仓库源码剖析其 Context 状态管理、折叠动画与三种外观的实现原理帮助你在实战中快速搭建可展开、可折叠、带子菜单与徽标的高质量侧边导航。Sidenav 是什么Sidenav侧导航是 rsuite 提供的用于页面侧边栏的导航组件它本身并不独立实现导航逻辑而是对Nav组件的封装通过Sidenav.Body、Sidenav.Header、Sidenav.Footer等子组件划分出侧边栏的典型区块结构。源码注释中对它的定义非常明确TheSidenavcomponent is an encapsulation of the page sidebarNav参见 src/Sidenav/Sidenav.tsx。一个典型的 Sidenav 由Sidenav.Header顶部区域如 Logo、搜索框、Sidenav.Body主体放置Nav导航内容、Sidenav.Footer底部区域如折叠切换按钮三部分构成。主组件默认渲染为nav元素Body、Header、Footer等子组件默认渲染为div。获取组件Sidenav 支持两种引入方式即从 rsuite 主包中整体导入或按需单独引入组件及其样式// 方式一从主包导入Main import { Sidenav, Nav } from rsuite; // 方式二单独引入Individual import Sidenav from rsuite/Sidenav; import Nav from rsuite/Nav; // 可选按需引入组件样式 import rsuite/Sidenav/styles/index.css;两种方式对应的完整代码由文档站点的 ImportGuide 组件自动生成参见 docs/components/ImportGuide/ImportGuide.tsx。按需引入时组件样式文件遵循rsuite/ComponentName/styles/index.css的命名约定。基础用法默认侧边导航最基础的场景是直接放置一组Nav.Item并通过w属性Box 宽度属性控制侧边栏宽度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 { Sidenav, Nav } from rsuite; const App () ( Sidenav w{240} 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 ); ReactDOM.render(App /, document.getElementById(root));每个Nav.Item都可以通过icon属性搭配 rsuite 图标库rsuite/icons中的图标形成图标 文字的经典侧边栏菜单项。完整示例见 docs/pages/components/sidenav/fragments/basic.md。子菜单多级导航结构当菜单存在层级关系时使用Nav.Menu包裹子项并通过eventKey标识菜单项。defaultOpenKeys用于声明初始展开的菜单键值数组import { Sidenav, Nav } from rsuite; 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; const App () ( Sidenav defaultOpenKeys{[3, 4]} w{240} Sidenav.Body Nav Nav.Item eventKey1 icon{DashboardIcon /} Overview /Nav.Item Nav.Menu eventKey2 titleCustomers icon{PeoplesIcon /} Nav.Item eventKey2-1Users/Nav.Item Nav.Item eventKey2-2Groups/Nav.Item /Nav.Menu Nav.Menu eventKey3 titleAnalytics icon{PieChartIcon /} Nav.Item eventKey3-1Geo/Nav.Item Nav.Item eventKey3-2Devices/Nav.Item Nav.Item eventKey3-3Loyalty/Nav.Item Nav.Item eventKey3-4Visit Depth/Nav.Item /Nav.Menu Nav.Menu eventKey4 titleSecurity icon{DataAuthorizeIcon /} Nav.Item eventKey4-1Users/Nav.Item Nav.Item eventKey4-2Roles/Nav.Item Nav.Item eventKey4-3Permissions/Nav.Item /Nav.Menu Nav.Menu eventKey5 titleSettings icon{SettingIcon /} Nav.Item eventKey5-1Applications/Nav.Item Nav.Item eventKey5-2Channels/Nav.Item Nav.Item eventKey5-3Versions/Nav.Item /Nav.Menu /Nav /Sidenav.Body /Sidenav );Nav.Menu的eventKey同时也是其对应子菜单在openKeys/defaultOpenKeys中的标识上述示例中[3, 4]表示初始展开 Analytics 与 Security 两个子菜单。完整示例见 docs/pages/components/sidenav/fragments/submenu.md。从源码结构看Sidenav 内部实际上把Nav.Menu渲染为SidenavDropdown组件见 src/Sidenav/SidenavDropdown.tsx子菜单的打开/关闭状态会同步写入 Sidenav 的openKeys。分组标题Sidenav.GroupLabel当导航项很多、需要按业务模块分组时使用Sidenav.GroupLabel定义分组标题。它通常配合Nav.Item的panel属性使用import { Sidenav, Nav } from rsuite; import EventDetailIcon from rsuite/icons/EventDetail; import TaskIcon from rsuite/icons/Task; import PieChartIcon from rsuite/icons/PieChart; import PeoplesIcon from rsuite/icons/Peoples; import GearIcon from rsuite/icons/Gear; const App () ( Sidenav w{240} Sidenav.Body Nav Nav.Item panel Sidenav.GroupLabelWorkspace/Sidenav.GroupLabel /Nav.Item Nav.Menu eventKey1 titleProjects icon{EventDetailIcon /} Nav.Item eventKey1-1Overview/Nav.Item Nav.Item eventKey1-2All Projects/Nav.Item Nav.Item eventKey1-3Active Projects/Nav.Item /Nav.Menu Nav.Menu eventKey2 titleTasks icon{TaskIcon /} Nav.Item eventKey2-1My Tasks/Nav.Item Nav.Item eventKey2-2Assigned to Me/Nav.Item /Nav.Menu Nav.Item panel Sidenav.GroupLabelManagement/Sidenav.GroupLabel /Nav.Item Nav.Menu eventKey3 titleTeam icon{PeoplesIcon /} Nav.Item eventKey3-1Team Members/Nav.Item Nav.Item eventKey3-2Roles Permissions/Nav.Item /Nav.Menu Nav.Menu eventKey4 titleSettings icon{GearIcon /} Nav.Item eventKey4-1General Settings/Nav.Item Nav.Item eventKey4-2Security/Nav.Item /Nav.Menu /Nav /Sidenav.Body /Sidenav );完整示例见 docs/pages/components/sidenav/fragments/group.md。Sidenav.GroupLabel在样式上使用次级文字颜色--rs-text-secondary与较小的字号渲染见 src/Sidenav/styles/index.scss 中.rs-sidenav-group-label规则视觉上明显区别于可点击的菜单项。Sidenav 顶部与底部使用 Sidenav.Header 定义顶部内容Sidenav.Header用来承载导航顶部的内容例如品牌 Logo、搜索框等。下面的示例在头部放置了品牌标识与一个带搜索图标的输入框import DashboardIcon from rsuite/icons/Dashboard; import SearchIcon from rsuite/icons/Search; import { Sidenav, Nav, HStack, VStack, Input, InputGroup } from rsuite; import { SiProtondb } from react-icons/si; const Header () ( 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 () ( Sidenav w{240} Sidenav.Header Header / /Sidenav.Header Sidenav.Body Nav Nav.Item icon{DashboardIcon /}Overview/Nav.Item {/* ...更多菜单项 */} /Nav /Sidenav.Body /Sidenav );完整示例见 docs/pages/components/sidenav/fragments/header.md。使用 Sidenav.Footer 定义底部内容Sidenav.Footer用来承载导航底部的内容最典型的就是折叠/展开导航的切换按钮。与Sidenav.Toggle搭配时可以实现点击按钮即切换侧边栏展开状态import { Sidenav, Nav, HStack, VStack, Input, InputGroup, Box } from rsuite; import DashboardIcon from rsuite/icons/Dashboard; import SearchIcon from rsuite/icons/Search; 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] React.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 /Sidenav.Body Sidenav.Footer Sidenav.Toggle onToggle{setExpanded} / /Sidenav.Footer /Sidenav /Box ); };这个示例还展示了折叠状态下的自适应当expanded为false时头部只居中显示品牌图标、隐藏搜索框底部显示折叠切换按钮。完整示例见 docs/pages/components/sidenav/fragments/footer.md。Sidenav.Toggle在源码层面实现为IconButton内部通过读取 Sidenav Context 拿到当前的expanded状态点击时调用onToggle(!expanded, event)并同步触发onClick见 src/Sidenav/SidenavToggle.tsx它的aria-label会根据状态自动切换为Collapse或Expand兼顾无障碍需求。可控的展开与折叠导航Sidenav 的展开状态既可以通过Sidenav.Toggle内部管理也可以完全由外部受控。下面的示例用独立的Toggle开关组件控制expanded同时让Nav的activeKey受控形成完整的选中项 展开状态双向受控模式import { Sidenav, Nav, Toggle, Box } from rsuite; 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; const App () { const [expanded, setExpanded] React.useState(false); const [activeKey, setActiveKey] React.useState(1); return ( Box w{240} Toggle onChange{setExpanded} checked{expanded} checkedChildrenExpand unCheckedChildrenCollapse / hr / Sidenav expanded{expanded} defaultOpenKeys{[3, 4]} Sidenav.Body Nav activeKey{activeKey} onSelect{setActiveKey} Nav.Item eventKey1 icon{DashboardIcon /} Overview /Nav.Item Nav.Menu eventKey2 titleCustomers icon{PeoplesIcon /} Nav.Item eventKey2-1Users/Nav.Item Nav.Item eventKey2-2Groups/Nav.Item /Nav.Menu Nav.Menu eventKey3 titleAnalytics icon{PieChartIcon /} Nav.Item eventKey3-1Geo/Nav.Item Nav.Item eventKey3-2Devices/Nav.Item Nav.Item eventKey3-3Loyalty/Nav.Item Nav.Item eventKey3-4Visit Depth/Nav.Item /Nav.Menu Nav.Menu eventKey4 titleSecurity icon{DataAuthorizeIcon /} Nav.Item eventKey4-1Users/Nav.Item Nav.Item eventKey4-2Roles/Nav.Item Nav.Item eventKey4-3Permissions/Nav.Item /Nav.Menu Nav.Menu eventKey5 titleSettings icon{SettingIcon /} Nav.Item eventKey5-1Applications/Nav.Item Nav.Item eventKey5-2Channels/Nav.Item Nav.Item eventKey5-3Versions/Nav.Item /Nav.Menu /Nav /Sidenav.Body Sidenav.Footer Sidenav.Toggle onToggle{setExpanded} / /Sidenav.Footer /Sidenav /Box ); };完整示例见 docs/pages/components/sidenav/fragments/collapsed.md。关于expanded的受控与非受控在源码中openKeys展开的菜单键值通过useControlledHook 管理见 src/Sidenav/Sidenav.tsx即同时支持传入openKeys的受控模式和只传defaultOpenKeys的非受控模式而整个 Sidenav 的展开/折叠则由expanded属性直接驱动配合Transition组件timeout{300}实现 300ms 的展开/折叠动画动画期间分别挂载collapse-in/collapse-out/collapsing等 CSS 类。自定义面板和分割线在子菜单内部可以通过在Nav.Item上设置panel和divider属性自由组合出分组标题 分割线的精细排版例如在同一个子菜单中分隔 Reports 与 Settings 两组内容import { Sidenav, Nav, HStack, VStack, Box } from rsuite; import DashboardIcon from rsuite/icons/Dashboard; import PeoplesIcon from rsuite/icons/Peoples; import PieChartIcon from rsuite/icons/PieChart; import { SiProtondb } from react-icons/si; const Header () ( VStack p10px 10px 0 10px spacing{12} HStack SiProtondb size{32} / Brand /HStack /VStack ); const App () ( Box w{240} Sidenav defaultOpenKeys{[3, 4]} Sidenav.Header Header / /Sidenav.Header Sidenav.Body Nav Nav.Item eventKey1 icon{DashboardIcon /} Overview /Nav.Item Nav.Item eventKey2 icon{PeoplesIcon /} Customers /Nav.Item Nav.Menu eventKey3 titleAnalytics icon{PieChartIcon /} Nav.Item divider / Nav.Item panel Sidenav.GroupLabelReports/Sidenav.GroupLabel /Nav.Item Nav.Item eventKey3-1Geo/Nav.Item Nav.Item eventKey3-2Devices/Nav.Item Nav.Item eventKey3-3Loyalty/Nav.Item Nav.Item eventKey3-4Visit Depth/Nav.Item Nav.Item divider / Nav.Item panel Sidenav.GroupLabelSettings/Sidenav.GroupLabel /Nav.Item Nav.Item eventKey3-5Applications/Nav.Item Nav.Item eventKey3-6Channels/Nav.Item Nav.Item eventKey3-7Versions/Nav.Item /Nav.Menu /Nav /Sidenav.Body /Sidenav /Box );完整示例见 docs/pages/components/sidenav/fragments/divider-panel.md。divider渲染一条分割线panel则把一个Nav.Item变为无交互的纯内容容器用于承载Sidenav.GroupLabel之类的静态信息。带徽标用 Badge 显示数量侧边导航经常需要提示未读消息数待办数量等信息。将Badge组件嵌套进Nav.Item即可实现带徽标的菜单项。为了让徽标靠右对齐示例中用HStack将文字与徽标两端分布import NoticeIcon from rsuite/icons/Notice; import TaskIcon from rsuite/icons/Task; import CalenderDateIcon from rsuite/icons/CalenderDate; import HistoryIcon from rsuite/icons/History; import { Sidenav, Nav, Badge, HStack } from rsuite; const NavItem ({ icon, children, badge }) ( Nav.Item icon{icon} HStack justifyContentspace-between style{{ flex: 1 }} {children} {badge} /HStack /Nav.Item ); const App () ( Sidenav w{240} Sidenav.Body Nav NavItem icon{NoticeIcon /} badge{Badge content{15} /} Notification /NavItem NavItem icon{TaskIcon /} badge{Badge content{6} /} To-Do List /NavItem NavItem icon{CalenderDateIcon /} badge{Badge contentnew coloryellow /} Schedule /NavItem NavItem icon{HistoryIcon /} badge{Badge content6.0.0 colorgreen /} Version History /NavItem /Nav /Sidenav.Body /Sidenav );完整示例见 docs/pages/components/sidenav/fragments/with-badge.md。Badge的content既可以是数字也可以是文本color属性可自定义徽标颜色如yellow、green。外观appearance 属性appearance属性定义了 Sidenav 的三种视觉外观取值说明default默认外观使用默认背景色与文字色inverse反转外观使用深色背景与浅色文字视觉上与默认外观形成强烈反差subtle极简外观背景透明仅在悬停/选中时呈现底色风格更轻盈注意在高对比度主题High Contrast Mode下所有外观的表现都与default外观一致。下面的示例用同一个受控组件结构渲染了三种外观的 Sidenav 并排对比同时把openKeys、expanded、activeKey全部提升为受控状态import { Sidenav, Nav } from rsuite; 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; const styles { width: 240, display: inline-table, marginRight: 10 }; const CustomSidenav ({ appearance, openKeys, expanded, onOpenChange, onExpand, ...navProps }) { return ( div style{styles} Sidenav appearance{appearance} expanded{expanded} openKeys{openKeys} onOpenChange{onOpenChange} Sidenav.Body Nav {...navProps} Nav.Item eventKey1 icon{DashboardIcon /} Overview /Nav.Item Nav.Menu eventKey2 titleCustomers icon{PeoplesIcon /} Nav.Item eventKey2-1Users/Nav.Item Nav.Item eventKey2-2Groups/Nav.Item /Nav.Menu Nav.Menu eventKey3 titleAnalytics icon{PieChartIcon /} Nav.Item eventKey3-1Geo/Nav.Item Nav.Item eventKey3-2Devices/Nav.Item Nav.Item eventKey3-3Loyalty/Nav.Item Nav.Item eventKey3-4Visit Depth/Nav.Item /Nav.Menu Nav.Menu eventKey4 titleSecurity icon{DataAuthorizeIcon /} Nav.Item eventKey4-1Users/Nav.Item Nav.Item eventKey4-2Roles/Nav.Item Nav.Item eventKey4-3Permissions/Nav.Item /Nav.Menu Nav.Menu eventKey5 titleSettings icon{SettingIcon /} Nav.Item eventKey5-1Applications/Nav.Item Nav.Item eventKey5-2Channels/Nav.Item Nav.Item eventKey5-3Versions/Nav.Item /Nav.Menu /Nav /Sidenav.Body Sidenav.Footer Sidenav.Toggle onToggle{onExpand} / /Sidenav.Footer /Sidenav /div ); }; const App () { const [activeKey, setActiveKey] React.useState(1); const [openKeys, setOpenKeys] React.useState([3, 4]); const [expanded, setExpand] React.useState(true); return ( CustomSidenav activeKey{activeKey} openKeys{openKeys} onSelect{setActiveKey} onOpenChange{setOpenKeys} expanded{expanded} onExpand{setExpand} / CustomSidenav activeKey{activeKey} openKeys{openKeys} onOpenChange{setOpenKeys} onSelect{setActiveKey} expanded{expanded} onExpand{setExpand} appearanceinverse / CustomSidenav activeKey{activeKey} openKeys{openKeys} onOpenChange{setOpenKeys} onSelect{setActiveKey} expanded{expanded} onExpand{setExpand} appearancesubtle / / ); };完整示例见 docs/pages/components/sidenav/fragments/appearance.md。源码实现要点appearance在源码中并不会直接映射为 CSS 类而是通过data-appearance数据属性下发见 src/Sidenav/Sidenav.tsx 中的data-appearance{appearance}样式表再据此命中.rs-sidenav[data-appearancedefault|inverse|subtle]三组规则见 src/Sidenav/styles/index.scss。三种外观分别对应一组语义化的 CSS 变量例如--rs-sidenav-default-bg、--rs-sidenav-inverse-bg、--rs-sidenav-subtle-hover-bg等便于通过主题定制。样式文件中同时用high-contrast-mode混入mixin处理了高对比度主题下的外观统一问题与文档中高对比度主题下所有外观均与 default 一致的说明相印证。组件结构与状态管理原理子组件组合关系Sidenav 采用主组件 静态子组件的复合结构。主组件上挂载了 5 个可直接使用的子组件见 src/Sidenav/Sidenav.tsx 中的Subcomponents定义Sidenav.Header顶部区块Sidenav.Body主体区块Sidenav.Footer底部区块Sidenav.GroupLabel分组标题Sidenav.Toggle折叠切换按钮此外index.tsx还导出了Sidenav.Item、Sidenav.Dropdown、Sidenav.DropdownItem、Sidenav.DropdownToggle等内部组件见 src/Sidenav/index.tsx。不过在日常使用中直接使用Nav.Item与Nav.Menu即可Sidenav 会在内部将它们映射为对应的 Sidenav 变体。Context 驱动的展开状态Sidenav 通过SidenavContext向所有后代组件广播状态Context 中包括openKeys、expanded、sidenav标记、onOpenChange回调等见 src/Sidenav/SidenavContext.tsx。当用户点击某个子菜单时handleOpenChange会基于当前openKeys做增删操作——已存在则移除折叠、不存在则追加展开随后更新状态并触发onOpenChange见 src/Sidenav/Sidenav.tsx。展开与折叠时的渲染差异在SidenavDropdown中有一个关键分支当 Sidenav 处于展开状态sidenav.expanded为true时子菜单渲染为内联展开的ExpandedSidenavDropdown二级菜单直接纵向铺开当 Sidenav 折叠时则切换为基于Menu的悬浮弹出层点击菜单按钮后以浮层形式展示子菜单见 src/Sidenav/SidenavDropdown.tsx。折叠后的浮层菜单顶部还会渲染一个标题头rs-dropdown-header弥补折叠状态下无法显示父级菜单文字的不足。样式层面展开态.rs-sidenav-collapse-in下的子菜单使用原生折叠动画菜单项支持 Ripple 水波纹效果折叠态.rs-sidenav-collapse-out下菜单项只居中显示图标文字通过sideNavFoldedText关键帧动画渐隐见 src/Sidenav/styles/index.scss。测试覆盖情况仓库为 Sidenav 提供了较为完整的测试用例src/Sidenav/test/Sidenav.spec.tsx 及同目录下 Header、Body、Footer、Toggle、GroupLabel、Item 各自的 spec 文件覆盖了默认渲染类名rs-sidenav、data-appearance属性、展开状态类名rs-sidenav-collapse-in、onSelect回调触发以及 Sidenav 内 Dropdown 的展开/折叠动画切换等行为可作为验证自定义用法是否正确的参考。Props 完整参考以下为官方文档提供的全部 Props 说明Sidenav 各子组件于 6.0.0 版本新增的Toggle、Footer、GroupLabel已在表格中标注。Sidenav属性名称类型(默认值)描述appearancedefault | inverse | subtle(default)设置侧边导航的视觉外观样式asElementType(div)自定义根组件的 HTML 元素类型classPrefixstring(sidenav)组件 CSS 类名的前缀defaultOpenKeysstring[]初始展开下拉菜单项的键值数组expandedboolean(true)控制侧边导航的展开/折叠状态onOpenChange(openKeys: string[], event) void菜单项打开状态变化时的回调函数openKeysstring[]受控的展开下拉菜单项的键值数组补充说明expanded默认值为true源码中同样以expanded true为默认值见 src/Sidenav/Sidenav.tsxas在官方 Props 表中记录的默认值为div而从源码实现看主组件默认渲染为nav语义元素as nav子组件则默认渲染div。onOpenChange的回调签名还包含第二个参数eventReact 合成事件子菜单展开/收起时均会触发。Sidenav.Header属性名称类型(默认值)描述asElementType(div)自定义头部组件的 HTML 元素类型classPrefixstring(sidenav-header)头部组件 CSS 类名的前缀Sidenav.Body属性名称类型(默认值)描述asElementType(div)自定义主体组件的 HTML 元素类型classPrefixstring(sidenav-body)主体组件 CSS 类名的前缀Sidenav.Footer![][6.0.0]属性名称类型(默认值)描述asElementType(div)自定义底部组件的 HTML 元素类型classPrefixstring(sidenav-footer)底部组件 CSS 类名的前缀Sidenav.Toggle![][6.0.0]属性名称类型(默认值)描述asElementType(button)自定义切换按钮的 HTML 元素类型classPrefixstring(sidenav-toggle)切换按钮 CSS 类名的前缀expandedboolean控制切换按钮的展开/折叠状态onToggle(expanded: boolean) void切换状态变化时的回调函数Sidenav.GroupLabel![][6.0.0]属性名称类型(默认值)描述asElementType(div)自定义分组标签的 HTML 元素类型classPrefixstring(sidenav-group-label)分组标签 CSS 类名的前缀实战小结骨架搭建SidenavSidenav.BodyNav是最小可用组合需要品牌区或操作区时再引入Sidenav.Header/Sidenav.Footer。多级导航用Nav.Menu组织子菜单配合defaultOpenKeys非受控或openKeysonOpenChange受控管理展开状态。折叠交互expanded控制整体折叠Sidenav.Toggle或任意外部控件都可以驱动它折叠后子菜单自动切换为悬浮浮层模式。视觉定制appearance提供 default / inverse / subtle 三种开箱外观高对比度主题下统一为 default 表现更精细的配色可通过对应 CSS 变量在主题层覆盖。信息密度分组标题、分割线、徽标可以组合出信息量充足且层次分明的导航结构。如需查阅本文涉及的完整演示代码与源码可继续浏览仓库中的 docs/pages/components/sidenav/fragments 目录含 basic、submenu、group、header、footer、collapsed、divider-panel、with-badge、appearance、in-modal 等片段以及 src/Sidenav 源码目录。赞分享前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载相关推荐TEN Framework 集成 EZAI 繁中 TTS 扩展ezai_tw_tts_python 配置与实现全解析TEN Framework 集成 EZAI 繁中 TTS 扩展ezai_tw_tts_python 配置与实现全解析 本文档以 ezai_tw_tts_pyt前端UI组件rsuite Pagination 分页组件完全指南从基础用法到源码级原理解析rsuite Pagination 分页组件完全指南从基础用法到源码级原理解析 分页导航Pagination是长列表场景下最常见的交互组件之一它允许列表前端UI组件rsuite Card 卡片组件完全指南从基础用法到源码级原理rsuite Card 卡片组件完全指南从基础用法到源码级原理 本文以 rsuite 开源仓库中的 Card卡片组件文档 docs/pages/compo前端UI组件上一篇WinUtilWindows系统优化与软件部署的终极指南下一篇零配置到全定制FastAPI-MCP配置终极指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考