Skip to content

P
pro-layout
Commit e466cacb authored by Sendya's avatar Sendya
Browse files
Options

fix: headerContentRender wrapper style

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