diff --git a/components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap index 9e33615e9b..b4c8116823 100644 --- a/components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -95,7 +95,7 @@ Array [ - Navigation Three - Submenu + Navigation Two - Submenu +
+
+
+
+ +
+ +
+
+
+
+
+
+ +
+ +
+
, ] `; diff --git a/components/menu/__tests__/__snapshots__/demo.test.js.snap b/components/menu/__tests__/__snapshots__/demo.test.js.snap index aa65d66990..0e1d46e885 100644 --- a/components/menu/__tests__/__snapshots__/demo.test.js.snap +++ b/components/menu/__tests__/__snapshots__/demo.test.js.snap @@ -73,7 +73,7 @@ Array [ - Navigation Three - Submenu + Navigation Two - Submenu ( }> Navigation One - }> - - }> - Navigation Two + }> + }> + Navigation Two + + }> + Navigation Three + + + }> + Navigation Four - - Navigation Three + }> + Navigation Five diff --git a/components/menu/index.en-US.md b/components/menu/index.en-US.md index dc9d218600..1f90f6d04b 100644 --- a/components/menu/index.en-US.md +++ b/components/menu/index.en-US.md @@ -19,19 +19,37 @@ More layouts with navigation: [Layout](/components/layout). - Menu is rendered as a `ul` element, so it only supports [`li` and `script-supporting` elements](https://html.spec.whatwg.org/multipage/grouping-content.html#the-ul-element) as children nodes。Your customized node should be wrapped by `Menu.Item`. - Menu needs to collect its node structure, so its children should be `Menu.*` or encapsulated HOCs. -## API +### Usage upgrade after 4.20.0 + +```__react +import Alert from '../alert'; +ReactDOM.render(, mountNode); +``` ```jsx +// works when >=4.20.0, recommended ✅ const items = [ - { label: 'Menu' }, + { label: 'item 1' }, + { label: 'item 2' }, { - label: 'SubMenu', - children: [{ label: 'SubMenuItem' }], + label: 'sub menu', + children: [{ label: 'item 3' }], }, ]; -; +return ; + +// works when <4.20.0, deprecated when >=4.20.0 🙅🏻‍♀️ + + item 1 + item 2 + + item 3 + +; ``` +## API + ### Menu | Param | Description | Type | Default value | Version | diff --git a/components/menu/index.zh-CN.md b/components/menu/index.zh-CN.md index c85ad0a519..717fb2fb18 100644 --- a/components/menu/index.zh-CN.md +++ b/components/menu/index.zh-CN.md @@ -20,20 +20,37 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3XZcjGpvK/Menu.svg - Menu 元素为 `ul`，因而仅支持 [`li` 以及 `script-supporting` 子元素](https://html.spec.whatwg.org/multipage/grouping-content.html#the-ul-element)。因而你的子节点元素应该都在 `Menu.Item` 内使用。 - Menu 需要计算节点结构，因而其子元素仅支持 `Menu.*` 以及对此进行封装的 HOC 组件。 -## API +### 4.20.0 用法升级 + +```__react +import Alert from '../alert'; +ReactDOM.render(, mountNode); +``` ```jsx +// >=4.20.0 可用，推荐的写法 ✅ const items = [ - { label: '菜单项' }, + { label: '菜单项一' }, + { label: '菜单项二' }, { label: '子菜单', children: [{ label: '子菜单项' }], }, ]; +return ; -; +// <4.20.0 可用，>=4.20.0 时不推荐 🙅🏻‍♀️ + + 菜单项一 + 菜单项二 + + 子菜单项 + +; ``` +## API + ### Menu | 参数 | 说明 | 类型 | 默认值 | 版本 | @@ -75,7 +92,7 @@ const items = [ | disabled | 是否禁用 | boolean | false | | | icon | 菜单图标 | ReactNode | - | | | key | item 的唯一标志 | string | - | | -| label | 菜单项标题 | ReactNode | - | | +| label | 菜单项标题 | ReactNode | - | | | title | 设置收缩时展示的悬浮标题 | string | - | | > 注意：`icon` 是 `4.2.0` 新增的属性，之前的版本请使用下面的方式定义图标。