feat: 增加 header 高度自定义 API (#590)

* fix: 增加自定义header 样式 * fix: 修复top 模式下的height 处理问题 * fix: 修复top 模式下的height 处理问题 * doc: 完善API 文档 * fix: 删除example 中的一些配置 * fix: 放弃了自定义颜色的需求 * fix: code review issue
ant-design · Jul 27, 2020 · 9cc5182 · 9cc5182
1 parent 28fa344
commit 9cc5182
Show file tree

Hide file tree

Showing 11 changed files with 26 additions and 26 deletions.
diff --git a/docs/api.md b/docs/api.md
@@ -32,6 +32,7 @@ ProLayout 提供了丰富的 API 来自定义各种行为，我们可以在下
 | splitMenus | 是否自动切分 menuData，只有 mix 模式会生效 | boolean | false |
 | contentWidth | layout 的内容模式,Fluid：定宽 1200px，Fixed：自适应 | 'Fluid' \| 'Fixed' | `'Fluid'` |
 | navTheme | 导航的主题 | 'light' \| 'dark' | `'dark'` |
+| headerHeight | header 自定义高度 | number | 48 |
 | fixedHeader | 是否固定 header 到顶部 | boolean | `false` |
 | fixSiderbar | 是否固定导航 | boolean | `false` |
 | breakpoint | 触发响应式布局的[断点](https://ant.design/components/grid-cn/#Col) | `Enum { 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' }` | `lg` |

diff --git a/example/config/defaultSettings.ts b/example/config/defaultSettings.ts
@@ -16,4 +16,5 @@ export default {
   title: 'Ant Design Pro',
   pwa: false,
   iconfontUrl: '',
+  headerHeight: 64,
 } as Settings;
diff --git a/example/src/components/RightContent/index.less b/example/src/components/RightContent/index.less
@@ -14,13 +14,11 @@
 .right {
   display: flex;
   float: right;
-  height: 48px;
   margin-left: auto;
   overflow: hidden;
   .action {
     display: flex;
     align-items: center;
-    height: 48px;
     padding: 0 12px;
     cursor: pointer;
     transition: all 0.3s;

diff --git a/src/GlobalHeader/index.less b/src/GlobalHeader/index.less
@@ -11,7 +11,7 @@
   position: relative;
   display: flex;
   align-items: center;
-  height: @pro-layout-header-height;
+  height: 100%;
   padding: 0 16px;
   background: @pro-layout-header-bg;
   box-shadow: @pro-layout-header-box-shadow;
@@ -43,11 +43,10 @@
   &-logo {
     position: relative;
     overflow: hidden;
-    line-height: @pro-layout-header-height;
     a {
       display: flex;
       align-items: center;
-      height: @pro-layout-header-height;
+      height: 100%;
       img {
         height: 28px;
       }

diff --git a/src/GlobalHeader/index.tsx b/src/GlobalHeader/index.tsx
@@ -76,7 +76,7 @@ export default class GlobalHeader extends Component<GlobalHeaderProps> {
       children,
       splitMenus,
       menuData,
-      prefixCls,
+      prefixCls
     } = this.props;
     const baseClassName = `${prefixCls}-global-header`;
     const className = classNames(propClassName, baseClassName, {
@@ -107,7 +107,7 @@ export default class GlobalHeader extends Component<GlobalHeaderProps> {
     );
 
     return (
-      <div className={className} style={style}>
+      <div className={className} style={{ ...style }}>
         {isMobile && renderLogo(menuHeaderRender, logoDom)}
         {isMobile && collapsedButtonRender && (
           <span

diff --git a/src/Header.tsx b/src/Header.tsx
@@ -77,6 +77,7 @@ class HeaderView extends Component<HeaderViewProps, HeaderViewState> {
       headerRender,
       isMobile,
       prefixCls,
+      headerHeight
     } = this.props;
     const needFixedHeader = fixedHeader || layout === 'mix';
     const isTop = layout === 'top';
@@ -105,17 +106,17 @@ class HeaderView extends Component<HeaderViewProps, HeaderViewState> {
         {needFixedHeader && (
           <Header
             style={{
-              height: 48,
-              lineHeight: '48px',
+              height: headerHeight,
+              lineHeight: `${headerHeight}px`,
               background: 'transparent',
             }}
           />
         )}
         <Header
           style={{
             padding: 0,
-            height: 48,
-            lineHeight: '48px',
+            height: headerHeight,
+            lineHeight: `${headerHeight}px`,
             width,
             zIndex: layout === 'mix' ? 100 : 9,
             right,

diff --git a/src/SiderMenu/SiderMenu.tsx b/src/SiderMenu/SiderMenu.tsx
@@ -100,6 +100,7 @@ const SiderMenu: React.FC<SiderMenuProps> = (props) => {
     menuContentRender,
     prefixCls = 'ant-pro',
     onOpenChange,
+    headerHeight
   } = props;
   const baseClassName = `${prefixCls}-sider`;
   const { flatMenuKeys } = MenuCounter.useContainer();
@@ -153,6 +154,7 @@ const SiderMenu: React.FC<SiderMenuProps> = (props) => {
         collapsedWidth={48}
         style={{
           overflow: 'hidden',
+          paddingTop: layout === 'mix' ? headerHeight : undefined,
           ...style,
         }}
         width={siderWidth}

diff --git a/src/SiderMenu/index.less b/src/SiderMenu/index.less
@@ -28,10 +28,6 @@
     }
   }
 
-  &-layout-mix {
-    padding-top: 48px;
-  }
-
   .@{ant-prefix}-menu-inline-collapsed
     > .@{ant-prefix}-menu-item
     .anticon
@@ -254,8 +250,8 @@
   }
 
   .top-nav-menu li.@{ant-prefix}-menu-item {
-    height: @nav-header-height;
-    line-height: @nav-header-height;
+    height: 100%;
+    line-height: 1;
   }
   .drawer .drawer-content {
     background: @layout-sider-background;

diff --git a/src/SiderMenu/index.tsx b/src/SiderMenu/index.tsx
@@ -18,7 +18,7 @@ const SiderMenuWrapper: React.FC<SiderMenuProps> = (props) => {
     style,
     className,
     hide,
-    prefixCls,
+    prefixCls
   } = props;
   const { setFlatMenuKeys } = MenuCounter.useContainer();
 
@@ -49,6 +49,7 @@ const SiderMenuWrapper: React.FC<SiderMenuProps> = (props) => {
   if (hide) {
     return null;
   }
+
   return isMobile ? (
     <Drawer
       visible={!collapsed}

diff --git a/src/TopNavHeader/index.less b/src/TopNavHeader/index.less
@@ -6,7 +6,7 @@
 .@{top-nav-header-prefix-cls} {
   position: relative;
   width: 100%;
-  height: @pro-layout-header-height;
+  height: 100%;
   box-shadow: 0 1px 4px 0 rgba(0, 21, 41, 0.12);
   transition: background 0.3s, width 0.2s;
 
@@ -19,7 +19,6 @@
 
   .@{ant-prefix}-menu-submenu.@{ant-prefix}-menu-submenu-horizontal {
     height: 100%;
-    line-height: @pro-layout-header-height;
     .@{ant-prefix}-menu-submenu-title {
       height: 100%;
     }
@@ -39,7 +38,7 @@
 
   &-main {
     display: flex;
-    height: @pro-layout-header-height;
+    height: 100%;
     padding-left: 16px;
     &-left {
       display: flex;
@@ -54,9 +53,8 @@
   &-logo {
     position: relative;
     min-width: 165px;
-    height: @pro-layout-header-height;
+    height: 100%;
     overflow: hidden;
-    line-height: @pro-layout-header-height;
     transition: all 0.3s;
     img {
       display: inline-block;
@@ -75,8 +73,7 @@
   &-menu {
     min-width: 0;
     .@{ant-prefix}-menu.@{ant-prefix}-menu-horizontal {
-      height: @pro-layout-header-height;
-      line-height: @pro-layout-header-height;
+      height: 100%;
       border: none;
     }
   }

diff --git a/src/defaultSettings.ts b/src/defaultSettings.ts
@@ -16,12 +16,15 @@ export interface PureSettings {
   /**
    * nav menu position: `side` or `top`
    */
+  headerHeight?: number;
+  /**
+   * customize header height
+   */
   layout: 'side' | 'top' | 'mix';
   /**
    * layout of content: `Fluid` or `Fixed`, only works when layout is top
    */
   contentWidth: ContentWidth;
-
   /**
    * sticky header
    */
@@ -53,6 +56,7 @@ const defaultSettings: ProSettings = {
   menu: {
     locale: true,
   },
+  headerHeight: 48,
   title: 'Ant Design Pro',
   iconfontUrl: '',
   primaryColor: '#1890ff',