Commit e466cacb authored by Sendya's avatar Sendya

fix: headerContentRender wrapper style

parent 33dd36ff
......@@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>Ant Design Pro</title>
<title>Pro Layout</title>
</head>
<body>
<noscript>
......
......@@ -21,6 +21,9 @@
<h1>Pro Layout</h1>
</div>
</template>
<template v-slot:headerContentRender>
<div>headerContentRender</div>
</template>
<template v-slot:rightContentRender>
<div :class="['ant-pro-global-header-index-right', settings.layout === 'topmenu' && `ant-pro-global-header-index-${settings.theme}`]">
rightContentRender
......
{
"name": "@ant-design-vue/pro-layout",
"version": "0.3.13",
"version": "1.0.0",
"main": "./lib/index.js",
"module": "./es/index.js",
"repository": {
......
......@@ -17,8 +17,8 @@ import PageHeaderWrapper from './components/PageHeaderWrapper'
export const BasicLayoutProps = {
...SiderMenuProps,
...HeaderViewProps,
// 替换兼容 PropTypes.oneOf(['Fluid', 'Fixed']).def('Fluid')
contentWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]).def('Fluid'),
contentWidth: PropTypes.oneOf(['Fluid', 'Fixed']).def('Fluid'),
// contentWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]).def('Fluid'),
locale: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]).def('en-US'),
breadcrumbRender: PropTypes.func,
disableMobile: PropTypes.bool.def(false),
......@@ -99,9 +99,6 @@ const BasicLayout = {
const headerContentRender = getComponentFromProp(content, 'headerContentRender')
const menuRender = getComponentFromProp(content, 'menuRender')
// 兼容 0.3.4~0.3.8
const contentWidth = contentWidthCheck(props.contentWidth)
const isTopMenu = layout === 'topmenu'
const hasSiderMenu = !isTopMenu
// If it is a fix menu, calculate padding
......@@ -109,7 +106,6 @@ const BasicLayout = {
const hasLeftPadding = fixSiderbar && !isTopMenu && !isMobile
const cdProps = {
...props,
contentWidth,
hasSiderMenu,
footerRender,
menuHeaderRender,
......@@ -121,7 +117,7 @@ const BasicLayout = {
}
return (
<ConfigProvider i18nRender={i18nRender} contentWidth={contentWidth} breadcrumbRender={breadcrumbRender}>
<ConfigProvider i18nRender={i18nRender} contentWidth={props.contentWidth} breadcrumbRender={breadcrumbRender}>
<ContainerQuery query={MediaQueryEnum} onChange={handleMediaQuery}>
<Layout class={{
'ant-pro-basicLayout': true,
......@@ -143,7 +139,7 @@ const BasicLayout = {
...cdProps,
mode: 'horizontal',
})}
<WrapContent class="ant-pro-basicLayout-content" contentWidth={contentWidth}>
<WrapContent class="ant-pro-basicLayout-content" contentWidth={props.contentWidth}>
{children}
</WrapContent>
<Layout.Footer>
......
......@@ -60,15 +60,27 @@
&-trigger {
height: @layout-header-height;
padding: ~'calc((@{layout-header-height} - 26px) / 2)' 24px;
font-size: 20px;
line-height: @layout-header-height;
// vertical-align: middle;
padding: 0 22px;
display: inline-block;
cursor: pointer;
transition: all 0.3s, padding 0s;
.anticon {
font-size: 20px;
vertical-align: -0.225em;
}
&:hover {
background: @pro-header-hover-trigger-action-bg;
}
}
&-content {
height: @layout-header-height;
line-height: @layout-header-height;
display: inline-block;
}
.dark {
height: @layout-header-height;
.action {
......
......@@ -154,9 +154,9 @@ export const settings = {
primaryColor: PropTypes.string,
layout: PropTypes.oneOf(['sidemenu', 'topmenu']),
colorWeak: PropTypes.bool,
// contentWidth: PropTypes.oneOf(['Fluid', 'Fixed']).def('Fluid'),
contentWidth: PropTypes.oneOf(['Fluid', 'Fixed']).def('Fluid'),
// 替换兼容 PropTypes.oneOf(['Fluid', 'Fixed']).def('Fluid')
contentWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]).def('Fluid'),
// contentWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]).def('Fluid'),
fixedHeader: PropTypes.bool,
fixSiderbar: PropTypes.bool,
hideHintAlert: PropTypes.bool.def(false),
......@@ -192,6 +192,7 @@ const SettingDrawer = {
layout = 'sidemenu',
fixedHeader = false,
fixSiderbar = false,
contentWidth,
hideHintAlert,
hideCopyButton,
colorWeak
......@@ -201,9 +202,6 @@ const SettingDrawer = {
const themeList = getThemeList(i18n)
const isTopMenu = layout === 'topmenu'
// 兼容 0.3.4~0.3.8
const contentWidth = contentWidthCheck(settings.contentWidth)
const iconStyle = {
color: '#fff',
fontSize: 20
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment