Sidenav 侧导航
对 Nav 的一个封装，用于页面侧边栏。
<Sidenav>侧导航组件。<Sidenav.Header>导航顶部内容区域。<Sidenav.Body>导航选项区域。
获取组件
import { Sidenav, Nav, Dropdown } from 'rsuite';
// or
import Sidenav from 'rsuite/Sidenav';
import Nav from 'rsuite/Nav';
import Dropdown from 'rsuite/Dropdown';演示
默认
外观
appearance 属性设置导航栏外观:
default(默认值) 默认导航栏。inverse反色的导航栏。subtle弱化的导航栏。
在高对比度主题下, 只有
default外观有效。
折叠菜单
自定义侧导航
- 设置
panel属性，可以自定义一个面板区域。 - 设置
divider属性，设置一个分割线。
Props
<Sidenav>
| 属性名称 | 类型 (默认值) |
描述 |
|---|---|---|
| appearance | enum: 'default', 'inverse', 'subtle' ('default') |
菜单外观 |
| as | ElementType ('div') |
为组件自定义元素类型 |
| classPrefix | string ('sidenav') |
组件 CSS 类的前缀 |
| defaultOpenKeys | string[] | 默认展开菜单, 对应 Dropdown 中 eventKey |
| expanded | boolean (true) |
是否是展开 Sidenav |
| onOpenChange | (openKeys: string[], event) => void | 菜单打开发生改变的回调函数 |
| openKeys | string[] | 打开菜单, 对应 Dropdown 中 eventKey (受控) |