Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
CaixyPromise opened this issue Apr 11, 2024 · 0 comments

Comments

@CaixyPromise
Copy link

🧐 问题描述 | 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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant