mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 17:44:35 +08:00
MadCcc
GitHub
parent
0741f59216
commit
bcaf197b31
@ -71,6 +71,7 @@ function SubMenu(props: SubMenuProps) {
|
||||
return (
|
||||
<MenuContext.Provider value={contextValue}>
|
||||
<RcSubMenu
|
||||
popupOffset={[10, 0]}
|
||||
{...omit(props, ['icon'])}
|
||||
title={titleNode}
|
||||
popupClassName={classNames(
|
||||
|
||||
@ -3,8 +3,6 @@ category: Components
|
||||
group: Navigation
|
||||
title: Menu
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/3XZcjGpvK/Menu.svg
|
||||
demo:
|
||||
cols: 2
|
||||
---
|
||||
|
||||
A versatile menu for navigation.
|
||||
@ -70,30 +68,30 @@ The legacy demo code for version `<4.20.0` could be found at [https://github.com
|
||||
|
||||
### Menu
|
||||
|
||||
| Param | Description | Type | Default value | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| defaultOpenKeys | Array with the keys of default opened sub menus | string\[] | - | |
|
||||
| defaultSelectedKeys | Array with the keys of default selected menu items | string\[] | - | |
|
||||
| expandIcon | custom expand icon of submenu | ReactNode \| `(props: SubMenuProps & { isSubMenu: boolean }) => ReactNode` | - | 4.9.0 |
|
||||
| forceSubMenuRender | Render submenu into DOM before it becomes visible | boolean | false | |
|
||||
| inlineCollapsed | Specifies the collapsed status when menu is inline mode | boolean | - | |
|
||||
| inlineIndent | Indent (in pixels) of inline menu items on each level | number | 24 | |
|
||||
| items | Menu item content | [ItemType\[\]](#ItemType) | - | 4.20.0 |
|
||||
| mode | Type of menu | `vertical` \| `horizontal` \| `inline` | `vertical` | |
|
||||
| multiple | Allows selection of multiple items | boolean | false | |
|
||||
| openKeys | Array with the keys of currently opened sub-menus | string\[] | - | |
|
||||
| overflowedIndicator | Customized the ellipsis icon when menu is collapsed horizontally | ReactNode | `<EllipsisOutlined />` | |
|
||||
| selectable | Allows selecting menu items | boolean | true | |
|
||||
| selectedKeys | Array with the keys of currently selected menu items | string\[] | - | |
|
||||
| style | Style of the root node | CSSProperties | - | |
|
||||
| subMenuCloseDelay | Delay time to hide submenu when mouse leaves (in seconds) | number | 0.1 | |
|
||||
| subMenuOpenDelay | Delay time to show submenu when mouse enters, (in seconds) | number | 0 | |
|
||||
| theme | Color theme of the menu | `light` \| `dark` | `light` | |
|
||||
| triggerSubMenuAction | Which action can trigger submenu open/close | `hover` \| `click` | `hover` | |
|
||||
| onClick | Called when a menu item is clicked | function({ item, key, keyPath, domEvent }) | - | |
|
||||
| onDeselect | Called when a menu item is deselected (multiple mode only) | function({ item, key, keyPath, selectedKeys, domEvent }) | - | |
|
||||
| onOpenChange | Called when sub-menus are opened or closed | function(openKeys: string\[]) | - | |
|
||||
| onSelect | Called when a menu item is selected | function({ item, key, keyPath, selectedKeys, domEvent }) | - | |
|
||||
| Param | Description | Type | Default value | Version |
|
||||
| -------------------- | ---------------------------------------------------------------- | -------------------------------------------------------------------------- | ---------------------- | ------- |
|
||||
| defaultOpenKeys | Array with the keys of default opened sub menus | string\[] | - | |
|
||||
| defaultSelectedKeys | Array with the keys of default selected menu items | string\[] | - | |
|
||||
| expandIcon | custom expand icon of submenu | ReactNode \| `(props: SubMenuProps & { isSubMenu: boolean }) => ReactNode` | - | 4.9.0 |
|
||||
| forceSubMenuRender | Render submenu into DOM before it becomes visible | boolean | false | |
|
||||
| inlineCollapsed | Specifies the collapsed status when menu is inline mode | boolean | - | |
|
||||
| inlineIndent | Indent (in pixels) of inline menu items on each level | number | 24 | |
|
||||
| items | Menu item content | [ItemType\[\]](#ItemType) | - | 4.20.0 |
|
||||
| mode | Type of menu | `vertical` \| `horizontal` \| `inline` | `vertical` | |
|
||||
| multiple | Allows selection of multiple items | boolean | false | |
|
||||
| openKeys | Array with the keys of currently opened sub-menus | string\[] | - | |
|
||||
| overflowedIndicator | Customized the ellipsis icon when menu is collapsed horizontally | ReactNode | `<EllipsisOutlined />` | |
|
||||
| selectable | Allows selecting menu items | boolean | true | |
|
||||
| selectedKeys | Array with the keys of currently selected menu items | string\[] | - | |
|
||||
| style | Style of the root node | CSSProperties | - | |
|
||||
| subMenuCloseDelay | Delay time to hide submenu when mouse leaves (in seconds) | number | 0.1 | |
|
||||
| subMenuOpenDelay | Delay time to show submenu when mouse enters, (in seconds) | number | 0 | |
|
||||
| theme | Color theme of the menu | `light` \| `dark` | `light` | |
|
||||
| triggerSubMenuAction | Which action can trigger submenu open/close | `hover` \| `click` | `hover` | |
|
||||
| onClick | Called when a menu item is clicked | function({ item, key, keyPath, domEvent }) | - | |
|
||||
| onDeselect | Called when a menu item is deselected (multiple mode only) | function({ item, key, keyPath, selectedKeys, domEvent }) | - | |
|
||||
| onOpenChange | Called when sub-menus are opened or closed | function(openKeys: string\[]) | - | |
|
||||
| onSelect | Called when a menu item is selected | function({ item, key, keyPath, selectedKeys, domEvent }) | - | |
|
||||
|
||||
> More options in [rc-menu](https://github.com/react-component/menu#api)
|
||||
|
||||
@ -133,17 +131,17 @@ The legacy demo code for version `<4.20.0` could be found at [https://github.com
|
||||
|
||||
#### SubMenuType
|
||||
|
||||
| Param | Description | Type | Default value | Version |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| children | Sub-menus or sub-menu items | [ItemType\[\]](#ItemType) | - | |
|
||||
| disabled | Whether sub-menu is disabled | boolean | false | |
|
||||
| icon | Icon of sub menu | ReactNode | - | |
|
||||
| key | Unique ID of the sub-menu | string | - | |
|
||||
| label | Menu label | ReactNode | - | |
|
||||
| popupClassName | Sub-menu class name, not working when `mode="inline"` | string | - | |
|
||||
| popupOffset | Sub-menu offset, not working when `mode="inline"` | \[number, number] | - | |
|
||||
| theme | Color theme of the SubMenu (inherits from Menu by default) | | `light` \| `dark` | - | |
|
||||
| onTitleClick | Callback executed when the sub-menu title is clicked | function({ key, domEvent }) | - | |
|
||||
| Param | Description | Type | Default value | Version |
|
||||
| -------------- | ---------------------------------------------------------- | --------------------------- | ----------------- | ------- | --- |
|
||||
| children | Sub-menus or sub-menu items | [ItemType\[\]](#ItemType) | - | |
|
||||
| disabled | Whether sub-menu is disabled | boolean | false | |
|
||||
| icon | Icon of sub menu | ReactNode | - | |
|
||||
| key | Unique ID of the sub-menu | string | - | |
|
||||
| label | Menu label | ReactNode | - | |
|
||||
| popupClassName | Sub-menu class name, not working when `mode="inline"` | string | - | |
|
||||
| popupOffset | Sub-menu offset, not working when `mode="inline"` | \[number, number] | - | |
|
||||
| theme | Color theme of the SubMenu (inherits from Menu by default) | | `light` \| `dark` | - | |
|
||||
| onTitleClick | Callback executed when the sub-menu title is clicked | function({ key, domEvent }) | - | |
|
||||
|
||||
#### MenuItemGroupType
|
||||
|
||||
|
||||
@ -4,8 +4,6 @@ group: 导航
|
||||
title: Menu
|
||||
subtitle: 导航菜单
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/3XZcjGpvK/Menu.svg
|
||||
demo:
|
||||
cols: 2
|
||||
---
|
||||
|
||||
为页面和功能提供导航的菜单列表。
|
||||
@ -14,7 +12,7 @@ demo:
|
||||
|
||||
导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。
|
||||
|
||||
更多布局和导航的使用可以参考：[通用布局](/components/layout)。
|
||||
更多布局和导航的使用可以参考：[通用布局](/components/layout-cn)。
|
||||
|
||||
## 开发者注意事项
|
||||
|
||||
@ -71,30 +69,30 @@ return <Menu items={items} />;
|
||||
|
||||
### 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\[\]](#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 }) | - | |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| -------------------- | ---------------------------------------------- | -------------------------------------------------------------------------- | ---------------------- | ------ |
|
||||
| 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\[\]](#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](https://github.com/react-component/menu#api)
|
||||
|
||||
@ -134,17 +132,17 @@ return <Menu items={items} />;
|
||||
|
||||
#### SubMenuType
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| children | 子菜单的菜单项 | [ItemType\[\]](#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` | - | |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| -------------- | ------------------------------------ | --------------------------- | ------ | ---- |
|
||||
| children | 子菜单的菜单项 | [ItemType\[\]](#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
|
||||
|
||||
|
||||
@ -140,7 +140,7 @@ const getBaseStyle: GenerateStyle<MenuToken> = token => {
|
||||
flex: 'none',
|
||||
},
|
||||
},
|
||||
[`${componentCls}-item, ${componentCls}-submenu`]: {
|
||||
[`${componentCls}-item, ${componentCls}-submenu, ${componentCls}-submenu-title`]: {
|
||||
borderRadius: token.radiusItem,
|
||||
},
|
||||
|
||||
|
||||
@ -24,12 +24,10 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
|
||||
motionEaseInOut,
|
||||
motionEaseOut,
|
||||
menuItemPaddingInline,
|
||||
itemMarginInline,
|
||||
motionDurationFast,
|
||||
colorItemTextHover,
|
||||
lineType,
|
||||
colorSplit,
|
||||
colorItemBgActive,
|
||||
|
||||
// Disabled
|
||||
colorItemTextDisabled,
|
||||
@ -41,8 +39,6 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
|
||||
colorDangerItemBgActive,
|
||||
colorDangerItemBgSelected,
|
||||
|
||||
radiusItem,
|
||||
|
||||
colorItemBgHover,
|
||||
} = token;
|
||||
|
||||
@ -84,46 +80,17 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
|
||||
backgroundColor: colorItemBgHover,
|
||||
},
|
||||
|
||||
'&:active::before': {
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
insetInlineStart: 0,
|
||||
top: 0,
|
||||
width: `100%`,
|
||||
height: '100%',
|
||||
flex: 1,
|
||||
borderRadius: radiusItem,
|
||||
backgroundColor: colorItemBgActive,
|
||||
transition: `background-color ${motionDurationFast}`,
|
||||
'&:active': {
|
||||
backgroundColor: colorItemBgSelected,
|
||||
},
|
||||
},
|
||||
[`${componentCls}-submenu-title`]: {
|
||||
'&::before': {
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
insetInlineStart: itemMarginInline,
|
||||
top: 0,
|
||||
width: `calc(100% - ${itemMarginInline * 2}px)`,
|
||||
height: '100%',
|
||||
borderRadius: radiusItem,
|
||||
backgroundColor: 'transparent',
|
||||
transition: `background-color ${motionDurationFast}`,
|
||||
},
|
||||
|
||||
'&:hover::before': {
|
||||
'&:hover': {
|
||||
backgroundColor: colorItemBgHover,
|
||||
},
|
||||
|
||||
'&:active::after': {
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
insetInlineStart: itemMarginInline,
|
||||
top: 0,
|
||||
width: `calc(100% - ${itemMarginInline * 2}px)`,
|
||||
height: '100%',
|
||||
borderRadius: radiusItem,
|
||||
backgroundColor: colorItemBgActive,
|
||||
transition: `background-color ${motionDurationFast}`,
|
||||
'&:active': {
|
||||
backgroundColor: colorItemBgSelected,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@ -29,16 +29,12 @@ const getVerticalInlineStyle: GenerateStyle<MenuToken, CSSObject> = token => {
|
||||
textOverflow: 'ellipsis',
|
||||
},
|
||||
|
||||
[`${componentCls}-item`]: {
|
||||
[`${componentCls}-item, ${componentCls}-submenu-title`]: {
|
||||
marginInline: itemMarginInline,
|
||||
marginBlock: menuItemMarginInline,
|
||||
width: `calc(100% - ${itemMarginInline * 2}px)`,
|
||||
},
|
||||
|
||||
[`${componentCls}-submenu-title`]: {
|
||||
marginBlock: menuItemMarginInline,
|
||||
},
|
||||
|
||||
// disable margin collapsed
|
||||
[`${componentCls}-submenu`]: {
|
||||
paddingBottom: 0.02,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user