From 9cc518202b6461afeeb84e5a7dcd62b6549401f5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=81=E6=96=87=E6=B6=9B?= Date: Mon, 27 Jul 2020 19:07:20 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=20header=20=E9=AB=98?= =?UTF-8?q?=E5=BA=A6=E8=87=AA=E5=AE=9A=E4=B9=89=20API=20(#590)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: 增加自定义header 样式 * fix: 修复top 模式下的height 处理问题 * fix: 修复top 模式下的height 处理问题 * doc: 完善API 文档 * fix: 删除example 中的一些配置 * fix: 放弃了自定义颜色的需求 * fix: code review issue --- docs/api.md | 1 + example/config/defaultSettings.ts | 1 + example/src/components/RightContent/index.less | 2 -- src/GlobalHeader/index.less | 5 ++--- src/GlobalHeader/index.tsx | 4 ++-- src/Header.tsx | 9 +++++---- src/SiderMenu/SiderMenu.tsx | 2 ++ src/SiderMenu/index.less | 8 ++------ src/SiderMenu/index.tsx | 3 ++- src/TopNavHeader/index.less | 11 ++++------- src/defaultSettings.ts | 6 +++++- 11 files changed, 26 insertions(+), 26 deletions(-) diff --git a/docs/api.md b/docs/api.md index 90dd90ed..b19418ee 100644 --- 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 index 615aeb16..32b06065 100644 --- 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 index ef2549e0..b71edbf5 100644 --- 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 index 4697e1b9..e6a22f66 100644 --- 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 index 3230f0aa..087b763f 100644 --- a/src/GlobalHeader/index.tsx +++ b/src/GlobalHeader/index.tsx @@ -76,7 +76,7 @@ export default class GlobalHeader extends Component { 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 { ); return ( -
+
{isMobile && renderLogo(menuHeaderRender, logoDom)} {isMobile && collapsedButtonRender && ( { headerRender, isMobile, prefixCls, + headerHeight } = this.props; const needFixedHeader = fixedHeader || layout === 'mix'; const isTop = layout === 'top'; @@ -105,8 +106,8 @@ class HeaderView extends Component { {needFixedHeader && (
@@ -114,8 +115,8 @@ class HeaderView extends Component {
= (props) => { menuContentRender, prefixCls = 'ant-pro', onOpenChange, + headerHeight } = props; const baseClassName = `${prefixCls}-sider`; const { flatMenuKeys } = MenuCounter.useContainer(); @@ -153,6 +154,7 @@ const SiderMenu: React.FC = (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 index 1b5e7121..fc54855c 100644 --- 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 index 485398d9..2f3e4e74 100644 --- a/src/SiderMenu/index.tsx +++ b/src/SiderMenu/index.tsx @@ -18,7 +18,7 @@ const SiderMenuWrapper: React.FC = (props) => { style, className, hide, - prefixCls, + prefixCls } = props; const { setFlatMenuKeys } = MenuCounter.useContainer(); @@ -49,6 +49,7 @@ const SiderMenuWrapper: React.FC = (props) => { if (hide) { return null; } + return isMobile ? (