feat(Menu): add API embeddable

alibaba-fusion · May 13, 2019 · 6d21bb1 · 6d21bb1
1 parent 8c6a3af
commit 6d21bb1
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 0 deletions.
diff --git a/docs/menu/index.en-us.md b/docs/menu/index.en-us.md
@@ -41,6 +41,7 @@
 | footer              | footer of menu                                                                                                                                                                                                                                                                                                                                                         | ReactNode    | -          |
 | autoFocus           | whether to get focus automatically                                                                                                                                                                                                                                                                                                                                                        | Boolean      | false      |
 | focusedKey          | keys of the currently focused submenu or menu item                                                                                                                                                                                                                                                                                                                                            | String       | -          |
+| embeddable          | integrate with the background or not(which means no background/border/box-shadow etc.), usually used with Layout. You can also custom its height like`<Menu style={{lineHeight: '100px'}}>`                                                                                                                                                                                                                                                        | Boolean         | false      |
 
 ### Menu.Item
 

diff --git a/docs/menu/index.md b/docs/menu/index.md
@@ -41,6 +41,7 @@
 | footer              | 自定义菜单尾部                                                                                                                                                                                                                                                                                                                                                         | ReactNode       | -          |
 | autoFocus           | 是否自动获得焦点                                                                                                                                                                                                                                                                                                                                                        | Boolean         | false      |
 | focusedKey          | 当前获得焦点的子菜单或菜单项 key 值                                                                                                                                                                                                                                                                                                                                            | String          | -          |
+| embeddable          | 是否开启嵌入式模式，一般用于Layout的布局中，开启后没有默认背景、外层border、box-shadow，可以配合`<Menu style={{lineHeight: '100px'}}>` 自定义高度                                                                                                                                                                                                                                                         | Boolean         | false      |
 
 ### Menu.Item
 

diff --git a/src/menu/main.scss b/src/menu/main.scss
@@ -23,6 +23,18 @@
     line-height: $menu-line-height;
     font-size: $menu-font-size;
 
+
+    &-embeddable,
+    &-embeddable &-item.#{$css-prefix}disabled,
+    &-embeddable &-item.#{$css-prefix}disabled #{$menu-prefix}-item-text > a {
+        background: initial;
+        border: none;
+    }
+
+    &-embeddable &-item-inner {
+        height: 100%;
+    }
+
     &-content {
         position: relative;
         padding: 0;

diff --git a/src/menu/view/menu.jsx b/src/menu/view/menu.jsx
@@ -157,6 +157,10 @@ export default class Menu extends Component {
         focusable: PropTypes.bool,
         onItemFocus: PropTypes.func,
         onBlur: PropTypes.func,
+        /**
+         * 是否开启嵌入式模式，一般用于Layout的布局中，开启后没有默认背景、外层border、box-shadow，可以配合`<Menu style={{lineHeight: '100px'}}>` 自定义高度
+         */
+        embeddable: PropTypes.bool,
         onItemKeyDown: PropTypes.func,
         expandAnimation: PropTypes.bool,
         itemClassName: PropTypes.string,
@@ -186,6 +190,7 @@ export default class Menu extends Component {
         hozAlign: 'left',
         autoFocus: false,
         focusable: true,
+        embeddable: false,
         onItemFocus: noop,
         onItemKeyDown: noop,
         onItemClick: noop,
@@ -732,6 +737,7 @@ export default class Menu extends Component {
             hozAlign,
             header,
             footer,
+            embeddable,
             selectMode,
             rtl,
         } = this.props;
@@ -741,6 +747,7 @@ export default class Menu extends Component {
             [`${prefix}menu`]: true,
             [`${prefix}ver`]: direction === 'ver',
             [`${prefix}hoz`]: direction === 'hoz',
+            [`${prefix}menu-embeddable`]: embeddable,
             [className]: !!className,
         });