Nav
Props
| Prop Name | Type | Required | Default | Description |
|---|---|---|---|---|
| mode | 'vertical' | 'inline' | 'inline' | 菜单类型，垂直或内嵌，默认内嵌 | |
| items | ItemType[] | 菜单项 | ||
| inlineCollapsed | boolean | inline 时菜单是否收起状态 | ||
| inlineIndent | number | 32 | 每一级缩进量 | |
| defaultOpenKeys | string[] | 初始展开的 SubMenu 菜单项 key 数组 | ||
| defaultSelectedKeys | string[] | 初始选中的菜单项 key 数组 | ||
| onOpenChange | (openKeys: string[]) => void | SubMenu 展开/关闭的回调 | ||
| onSelect | SelectEventHandler | 选中每一菜单项的回调, function({key:String, item:ReactComponent, domEvent:Event, selectedKeys:String[]}) | ||
| subMenuItemRender | (itemProps: SubMenuProps, dom: JSX.Element) => JSX.Element | 自定义 SubMenu render，可以获取 items 参数传入的数据 | ||
| menuItemRender | (itemProps: NavItemProps, dom: JSX.Element) => JSX.Element | 自定义 MenuItem render，可以获取 items 参数传入的数据 |
说明
这是 Nav 基础导航
演示
只有一级目录
一/二级目录 + 切换应用 + 分类标题 + 路由跳转
受控模式
垂直展开 + 路由跳转
mode 为 vertical 的垂直展开模式，labelType 为 small 的小标题还是向下展开，其余正常大小的标题垂直展开
结合 react-router 使用时可以用 subMenuItemRender 和 menuItemRender 方法
折叠目录
折叠目录时，labelType 为 small 的小标题与正常标题显示相同，如果没有 Icon，会显示标题的第一个字
ItemType
type ItemType = MenuItemType | SubMenuType
MenuItemType
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| icon | 菜单图标 | React.ReactNode | |
| title | 标题 | string | |
| labelType | 标题类型 | ‘normal’ ｜ ‘small’ | normal |
| key | 唯一标识 | string |
SubMenuType
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| icon | 菜单图标 | React.ReactNode | |
| title | 标题 | string | |
| labelType | 标题类型 | ‘normal’ ｜ ‘small’ | normal |
| key | 唯一标识 | string | |
| children | 子菜单项 | ItemType[] |