组件

Sidenav 侧导航

对 Nav 的一个封装，用于页面侧边栏。

  • <Sidenav> 侧导航组件。
  • <Sidenav.Header> 导航顶部内容区域。
  • <Sidenav.Body> 导航选项区域。

获取组件

import { Sidenav } from 'rsuite';

演示

默认

外观

appearance 属性设置导航栏外观:

  • 'default'(默认值) 默认导航栏。
  • 'inverse' 反色的导航栏。
  • 'subtle' 弱化的导航栏。

缩起/展开菜单

自定义侧导航

  • 设置 panel 属性，可以自定义一个面板区域。
  • 设置 divider 属性，设置一个分割线。

Props

<Sidenav>

属性名称 类型 (默认值) 描述
activeKey any 激活选项, 对应菜单 eventKey
appearance enum: 'default', 'inverse', 'subtle' ('default') 菜单外观
classPrefix string ('sidenav') 组件 CSS 类的前缀
componentClass React.ElementType ('div') 为组件自定义元素类型
defaultOpenKeys any[] 默认展开菜单, 对应 Dropdown 中 eventKey
expanded boolean (true) 是否是展开 Sidenav
onOpenChange (openKeys: any[], event: SyntheticEvent) => void 菜单打开发生改变的回调函数
onSelect (eventKey: any[], event: SyntheticEvent) => void 选择菜单的回调函数
openKeys any[] 打开菜单, 对应 Dropdown 中 eventKey (受控)