Skip to content

Latest commit

 

History

History
150 lines (116 loc) · 7.08 KB

index.zh-CN.md

File metadata and controls

150 lines (116 loc) · 7.08 KB
Raw
category group title subtitle description cover coverDark
Components
导航
Menu
导航菜单
为页面和功能提供导航的菜单列表。

何时使用

导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。

更多布局和导航的使用可以参考：通用布局。

开发者注意事项

  • Menu 元素为 ul，因而仅支持 li 以及 script-supporting 子元素。因而你的子节点元素应该都在 Menu.Item 内使用。
  • Menu 需要计算节点结构，因而其子元素仅支持 Menu.* 以及对此进行封装的 HOC 组件。

代码演示

顶部导航 顶部导航（dark） 内嵌菜单 缩起内嵌菜单 只展开当前父级菜单 垂直菜单 主题 子菜单主题 切换菜单类型 Style debug v4 版本 Menu 组件 Token

API

通用属性参考：通用属性

Menu

参数 说明 类型 默认值 版本
defaultOpenKeys 初始展开的 SubMenu 菜单项 key 数组 string[] -
defaultSelectedKeys 初始选中的菜单项 key 数组 string[] -
expandIcon 自定义展开图标 ReactNode | (props: SubMenuProps & { isSubMenu: boolean }) => ReactNode - 4.9.0
forceSubMenuRender 在子菜单展示之前就渲染进 DOM boolean false
inlineCollapsed inline 时菜单是否收起状态 boolean -
inlineIndent inline 模式的菜单缩进宽度 number 24
items 菜单内容 ItemType[] - 4.20.0
mode 菜单类型，现在支持垂直、水平、和内嵌模式三种 vertical | horizontal | inline vertical
multiple 是否允许多选 boolean false
openKeys 当前展开的 SubMenu 菜单项 key 数组 string[] -
overflowedIndicator 用于自定义 Menu 水平空间不足时的省略收缩的图标 ReactNode <EllipsisOutlined />
selectable 是否允许选中 boolean true
selectedKeys 当前选中的菜单项 key 数组 string[] -
style 根节点样式 CSSProperties -
subMenuCloseDelay 用户鼠标离开子菜单后关闭延时，单位：秒 number 0.1
subMenuOpenDelay 用户鼠标进入子菜单后开启延时，单位：秒 number 0
theme 主题颜色 light | dark light
triggerSubMenuAction SubMenu 展开/关闭的触发行为 hover | click hover
onClick 点击 MenuItem 调用此函数 function({ item, key, keyPath, domEvent }) -
onDeselect 取消选中时调用，仅在 multiple 生效 function({ item, key, keyPath, selectedKeys, domEvent }) -
onOpenChange SubMenu 展开/关闭的回调 function(openKeys: string[]) -
onSelect 被选中时调用 function({ item, key, keyPath, selectedKeys, domEvent }) -  

更多属性查看 rc-menu

ItemType

type ItemType = MenuItemType | SubMenuType | MenuItemGroupType | MenuDividerType;

MenuItemType

参数 说明 类型 默认值 版本
danger 展示错误状态样式 boolean false
disabled 是否禁用 boolean false
icon 菜单图标 ReactNode -
key item 的唯一标志 string -
label 菜单项标题 ReactNode -
title 设置收缩时展示的悬浮标题 string -

SubMenuType

参数 说明 类型 默认值 版本
children 子菜单的菜单项 ItemType[] -
disabled 是否禁用 boolean false
icon 菜单图标 ReactNode -
key 唯一标志 string -
label 菜单项标题 ReactNode -
popupClassName 子菜单样式，mode="inline" 时无效 string -
popupOffset 子菜单偏移量，mode="inline" 时无效 [number, number] -
onTitleClick 点击子菜单标题 function({ key, domEvent }) -
theme 设置子菜单的主题，默认从 Menu 上继承 light | dark -

MenuItemGroupType

定义类型为 group 时，会作为分组处理:

const groupItem = {
  type: 'group', // Must have
  label: 'My Group',
  children: [],
};
参数 说明 类型 默认值 版本
children 分组的菜单项 MenuItemType[] -
label 分组标题 ReactNode -

MenuDividerType

菜单项分割线，只用在弹出菜单内，需要定义类型为 divider：

const dividerItem = {
  type: 'divider', // Must have
};
参数 说明 类型 默认值 版本
dashed 是否虚线 boolean false

FAQ

为何 Menu 的子元素会渲染两次？

Menu 通过二次渲染收集嵌套结构信息以支持 HOC 的结构。合并成一个推导结构会使得逻辑变得十分复杂，欢迎 PR 以协助改进该设计。

在 Flex 布局中，Menu 没有按照预期响应式省略菜单？

Menu 初始化时会先全部渲染，然后根据宽度裁剪内容。当处于 Flex 布局中，你需要告知其预期宽度为响应式宽度（在线 Demo）：

<div style={{ flex }}>
  <div style={{ ... }}>Some Content</div>
  <Menu style={{ minWidth: 0, flex: "auto" }} />
</div>

主题变量（Design Token）