feat(Nav): add API embeddable

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

Hide file tree

Showing 4 changed files with 39 additions and 1 deletion.
diff --git a/docs/nav/index.en-us.md b/docs/nav/index.en-us.md
@@ -48,6 +48,7 @@ It provides top navigation and side navigation, the top navigation provides glob
 | hasTooltip      | whether has tool tip (only works when iconOnly=true)                                                                   | Boolean   | false      |
 | header          | custom navigation head                                                                                               | ReactNode | -          |
 | footer          | custom navigation footer                                                                                                | ReactNode | -          |
+| 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`<Nav style={{lineHeight: '100px'}}>`                                                                                                                                                                                                                                                               | Boolean      | false                                                                 |
 
 ### Nav.Group
 

diff --git a/docs/nav/index.md b/docs/nav/index.md
@@ -48,6 +48,7 @@
 | hasTooltip          | 是否有 ToolTips （仅在 iconOnly=true 时生效）                                                                                                                                                                                                                                                                                                                                | Boolean      | false                                                                 |
 | header              | 自定义导航头部                                                                                                                                                                                                                                                                                                                                                            | ReactNode    | -                                                                     |
 | footer              | 自定义导航尾部                                                                                                                                                                                                                                                                                                                                                            | ReactNode    | -                                                                     |
+| embeddable          | 是否开启嵌入式模式，一般用于Layout的布局中，开启后没有默认背景、外层border、box-shadow，可以配合`<Nav style={{lineHeight: '100px'}}>` 自定义高度                                                                                                                                                                                                                                                             | Boolean      | false                                                                 |
 
 ### Nav.Group
 

diff --git a/src/nav/main.scss b/src/nav/main.scss
@@ -374,6 +374,33 @@ $nav-icononly-width: $s-15;
             display: none;
         }
     }
+
+    &-embeddable {
+        &.#{$css-prefix}primary,
+        &.#{$css-prefix}secondary,
+        &.#{$css-prefix}normal {
+            height: 100%;
+            background: initial;
+            box-shadow: none;
+            border: none;
+
+            #{$menu-prefix}-sub-menu #{$menu-prefix}-item,
+            #{$nav-prefix}-item#{$menu-prefix}-item {
+                background: initial;
+            }
+        }
+
+        &#{$nav-prefix}.#{$css-prefix}hoz {
+            #{$menu-prefix}-item-inner {
+                height: 100%;
+            }
+
+            #{$menu-prefix}-sub-menu #{$menu-prefix}-item,
+            #{$nav-prefix}-item#{$menu-prefix}-item {
+                height: 100%;
+            }
+        }
+    }
 }
 
 @import "./rtl.scss";
diff --git a/src/nav/nav.jsx b/src/nav/nav.jsx
@@ -118,6 +118,10 @@ class Nav extends Component {
          * 自定义导航尾部
          */
         footer: PropTypes.node,
+        /**
+         * 是否开启嵌入式模式，一般用于Layout的布局中，开启后没有默认背景、外层border、box-shadow，可以配合`<Nav style={{lineHeight: '100px'}}>` 自定义高度
+         */
+        embeddable: PropTypes.bool,
         popupProps: PropTypes.object,
     };
 
@@ -135,6 +139,7 @@ class Nav extends Component {
         defaultSelectedKeys: [],
         popupAlign: 'follow',
         hasTooltip: false,
+        embeddable: false,
         hasArrow: true,
         popupProps: {},
     };
@@ -195,6 +200,7 @@ class Nav extends Component {
             iconOnly,
             hasArrow,
             hasTooltip,
+            embeddable,
             popupProps,
             rtl,
             ...others
@@ -229,6 +235,7 @@ class Nav extends Component {
             [`${prefix}${realActiveDirection}`]: realActiveDirection,
             [`${prefix}icon-only`]: iconOnly,
             [`${prefix}no-arrow`]: !hasArrow,
+            [`${prefix}nav-embeddable`]: embeddable,
             [className]: !!className,
         });
         const newStyle = iconOnly ? { ...style, width: '60px' } : style;
@@ -246,7 +253,9 @@ class Nav extends Component {
             selectMode: 'single',
             itemClassName: `${prefix}nav-item`,
             popupClassName: classNames({
-                [cls.replace(`${prefix}icon-only`, '')]: mode === 'popup',
+                [cls
+                    .replace(`${prefix}icon-only`, '')
+                    .replace(`${prefix}nav-embeddable`, '')]: mode === 'popup',
                 [`${prefix}icon-only`]: iconOnly && mode === 'inline',
                 [popupClassName]: !!popupClassName,
             }),