Open CaixyPromise opened 4 months ago
我正在使用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" }}>
<div> <h3 style={{ margin: 0, height: '160px', color: '#fff', lineHeight: '160px', textAlign: 'center', background: '#364d79', }}>2</h3> </div> <div> <h3 style={{ margin: 0, height: '160px', color: '#fff', lineHeight: '160px', textAlign: 'center', background: '#364d79', }}>3</h3> </div> <div> <h3 style={{ margin: 0, height: '300px', color: '#fff', lineHeight: '160px', textAlign: 'center', background: '#364d79', }}>4</h3> </div> </Carousel> <div style={{ width: '100%'}}> {defaultDom} </div> </div> </> ); }, menu: { defaultOpenAll: true }, logo: <LogoIcon/>, 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: { }, };
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
🧐 问题描述 | 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" }}>
1
};
// 我尝试调整的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