We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
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
我正在使用Ant design pro做一个网站开发。现在遇到一个idea不知道要怎么实现。 我想在顶部Header的基础之上,在上方添加一个轮播图,并且能够滑动下来。 类似于这样
我是通过设置app.tsx里的headerRender设置的,现在就出现正文contet和侧边栏sider都会被顶部header挡住。
我尝试过调整global.less的样式调整 content 和 sider 与header的 边距 ,但是又出现上方一直固定在上面,轮播图和header固定在上方(我想让轮播图区域可以被滚动下来),导致正文和侧边栏的区域变小。要怎么样才能正确设置header的渲染?
// 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" }}>
// 我尝试调整的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: { }, };
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
The text was updated successfully, but these errors were encountered:
No branches or pull requests
🧐 问题描述 | 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
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
The text was updated successfully, but these errors were encountered: