ant-design/ant-design-pro

🧐[问题 | question] ant design pro如何自定义Header,并且允许Header不是固定在上方。

Opened this issue · 0 comments

🧐 问题描述 | Problem description

我正在使用Ant design pro做一个网站开发。现在遇到一个idea不知道要怎么实现。
我想在顶部Header的基础之上,在上方添加一个轮播图,并且能够滑动下来。
类似于这样

我是通过设置app.tsx里的headerRender设置的,现在就出现正文contet和侧边栏sider都会被顶部header挡住。

我尝试过调整global.less的样式调整 content 和 sider 与header的 边距 ,但是又出现上方一直固定在上面,轮播图和header固定在上方(我想让轮播图区域可以被滚动下来),导致正文和侧边栏的区域变小。要怎么样才能正确设置header的渲染?

💻 示例代码 | Sample code

// app.tsx
export const layout: RunTimeLayoutConfig = ({ initialState }) =>
{
return {
avatarProps: {
render: () =>
{
return ;
},
},
headerRender: (props, defaultDom) => {
return (
<>
<div style={{ display: 'flex', flexDirection: 'column', background: "#F5F5F5"}}>
<Carousel autoplay dotPosition={"bottom"} style={{ width: '100%', height: "300px" }}>


<h3 style={{
margin: 0,
height: '160px',
color: '#fff',
lineHeight: '160px',
textAlign: 'center',
background: '#364d79',
}}>1


<h3 style={{
margin: 0,
height: '160px',
color: '#fff',
lineHeight: '160px',
textAlign: 'center',
background: '#364d79',
}}>2


<h3 style={{
margin: 0,
height: '160px',
color: '#fff',
lineHeight: '160px',
textAlign: 'center',
background: '#364d79',
}}>3


<h3 style={{
margin: 0,
height: '300px',
color: '#fff',
lineHeight: '160px',
textAlign: 'center',
background: '#364d79',
}}>4


<div style={{ width: '100%'}}>
{defaultDom}


</>
);
},
menu: {
defaultOpenAll: true
},
logo: ,
menuHeaderRender: undefined,
...defaultSettings,
};
};

// 我尝试调整的global.less
.ant-layout {
min-height: 100vh;
margin-top: 200px; // 调整和header的边距

}

.ant-pro-sider
{
margin-top: 300px; // 调整和header的边距
}

// 我的defaultSetting.ts
const Settings: ProLayoutProps & {
pwa?: boolean;
logo?: string;
} = {
navTheme: 'light',
// 拂晓蓝
colorPrimary: '#1890ff',
layout: 'mix',
contentWidth: 'Fluid',
fixedHeader: true,
fixSiderbar: true,
colorWeak: false,
title: 'xxx',
pwa: true,
iconfontUrl: '',
token: {
},
};

🚑 其他信息 | Other information

image

OS: Windows 11

Node:18.18.0

浏览器 | browser:Google Chrome 123.0.6312.106

Ant design pro:6.0

antd: 5.2.2

react: 18.2

umijs/max: 4.0.52