Nav 导航
提供多种形式的导航菜单列表，可以是横向、纵向布局。
包含以下组件：
<Nav>导航组件；<Nav.Item>导航选项组件。
获取组件
import { Nav, Dropdown } from 'rsuite';演示
默认
外观
appearance 属性设置导航外观:
- 'default'(默认值) 默认导航。
- 'tabs' 标签式的导航。
- 'subtle' 弱化的导航。
针对 subtle/tabs 导航，可以设置一个
reversed属性颠倒方向，用来适配导航在上下左右都可以使用。
垂直布局
设置选项状态
- active 激活
- disabled 禁用
宽度自适应
多级导航
当使用多级导航时，直接使用
<Dropdown>组件。
设置图标
与 Router 中的 Link 组合
扩展：响应式
扩展：可删除
Props
<Nav>
| 属性名称 | 类型(默认值) |
描述 |
|---|---|---|
| activeKey | any | 激活的 key, 对应 <Nav.Item> 中 eventKey |
| appearance | enum: 'default', 'tabs', 'subtle' ('default') |
设置外观 |
| children * | React.ChildrenArray<NavItem or Dropdown> | 组件内容 |
| classPrefix | string ('nav') |
组件 CSS 类的前缀 |
| justified | boolean | 宽度自适应 |
| onSelect | (eventKey: any, event: SyntheticEvent<any>) => void, | 选择事件触发的回调函数 |
| pills | boolean | 胶囊式导航 |
| pullRight | boolean | 显示在右侧 |
| stacked | boolean | 垂直导航 |
<Nav.Item>
| 属性名称 | 类型 | 描述 |
|---|---|---|
| active | boolean | 激活状态 |
| children * | React.Node | 组件内容 |
| componentClass | React.ElementType('a') |
为组件自定义元素类型 |
| disabled | boolean | 禁用状态 |
| href | string | 链接 |
| icon | React.Element<typeof Icon> | 设置图标 |
| onSelect | (eventKey: any, event: SyntheticEvent<any>) => void, | 选择事件触发的回调函数 |
| renderItem | (item:React.Node)=>React.Node | 自定义渲染选项 |