Sidenav 侧导航 #

对页面侧边栏的 Nav 组件的封装。

获取组件 #

import { Sidenav, Nav } from 'rsuite';

演示 #

默认 #

子菜单 #

分组标题 #

使用 Sidenav.GroupLabel 来定义导航的分组标题。

Sidenav 顶部 #

使用 Sidenav.Header 来定义导航顶部的内容，比如 Logo、搜索框等。

Sidenav 底部 #

使用 Sidenav.Footer 来定义导航底部的内容，比如折叠导航的切换按钮。

可控的展开与折叠导航 #

自定义面板和分割线 #

你可以通过在 Nav.Item 上使用 panel 和 divider 属性来自定义导航的内容。

带徽标 #

使用 Badge 组件来显示子菜单中的项目数量。

外观 #

appearance 属性允许你定义 Sidenav 的外观。可用的值包括 default、inverse 和 subtle。inverse 值可用于创建与默认外观视觉上不同的 Sidenav。subtle 值可用于创建具有简约外观的 Sidenav。

在高对比度主题下，所有外观都与 default 外观相同。

Props #

<Sidenav> #

属性名称	类型 (默认值)	描述
appearance	'default' | 'inverse' | 'subtle' ('default')	设置侧边导航的视觉外观样式
as	ElementType ('div')	自定义根组件的 HTML 元素类型
classPrefix	string ('sidenav')	组件 CSS 类名的前缀
defaultOpenKeys	string[]	初始展开下拉菜单项的键值数组
expanded	boolean (true)	控制侧边导航的展开/折叠状态
onOpenChange	(openKeys: string[], event) => void	菜单项打开状态变化时的回调函数
openKeys	string[]	受控的展开下拉菜单项的键值数组

<Sidenav.Header> #

属性名称	类型 (默认值)	描述
as	ElementType ('div')	自定义头部组件的 HTML 元素类型
classPrefix	string ('sidenav-header')	头部组件 CSS 类名的前缀

<Sidenav.Body> #

属性名称	类型 (默认值)	描述
as	ElementType ('div')	自定义主体组件的 HTML 元素类型
classPrefix	string ('sidenav-body')	主体组件 CSS 类名的前缀

<Sidenav.Footer> #

属性名称	类型 (默认值)	描述
as	ElementType ('div')	自定义底部组件的 HTML 元素类型
classPrefix	string ('sidenav-footer')	底部组件 CSS 类名的前缀

<Sidenav.Toggle> #

属性名称	类型 (默认值)	描述
as	ElementType ('button')	自定义切换按钮的 HTML 元素类型
classPrefix	string ('sidenav-toggle')	切换按钮 CSS 类名的前缀
expanded	boolean	控制切换按钮的展开/折叠状态
onToggle	(expanded: boolean) => void	切换状态变化时的回调函数

<Sidenav.GroupLabel> #

属性名称	类型 (默认值)	描述
as	ElementType ('div')	自定义分组标签的 HTML 元素类型
classPrefix	string ('sidenav-group-label')	分组标签 CSS 类名的前缀