一 话不多说,先展示效果:
展开时:
收起时:
二、实现代码如下
react 文件
import React, {useState} from 'react';
import {Layout} from 'antd';
import styles from "./index.module.less"; // 这个是样式文件,实际上里面只有一个button的样式
import foldUrl from "../../../public/btn_fold2.png"; // 这里是按钮中的图片,可以替换成自己的
const {Sider, Content} = Layout;
const ScalingTest = () => {
const [showSider, setShowSider] = useState(true);
const containerLayoutStyle: React.CSSProperties = {
borderRadius: "8px",
overflow: "hidden",
height: "600px"
};
const containerSiderStyle: React.CSSProperties = {
background: "red",
height: "600px",
fontSize: "24px",
};
const contentStyle: React.CSSProperties = {
backgroundColor: "gainsboro",
position: "relative",
height: "600px",
fontSize: "24px",
};
return <div style={{padding: 50}}>
<Layout style={containerLayoutStyle}>
<Sider style={containerSiderStyle} width={showSider ? 300 : 0}>
我是侧边栏
</Sider>
<Content style={contentStyle}>
{/* 伸缩按钮 */}
<button className={styles.closeButton} type={"button"}
onClick={() => setShowSider(!showSider)}>
<img src={foldUrl} width={4} height={8} alt={"img"}
style={{marginLeft: -2, transform: `rotate(${showSider ? 0 : 180}deg)`}}/>
</button>
<div>
我是内容噢
</div>
</Content>
</Layout>
</div>
}
export default ScalingTest;
CSS 样式文件:
// 展开、关闭按钮的样式
.closeButton {
position: absolute;
top: 50%;
transform: translate(0, -50%);
left: 6px;
width: 12px;
height: 40px;
background: linear-gradient(180deg, #EFEEF5 0%, #F0F1F5 98%);
border-radius: 4px 4px 4px 4px;
border: 1px solid rgba(255, 255, 255, 0.5);
}
三、题外话
说个题外话,我自己在使用ant desgin pro +umi 那套成熟的框架时,给layout组件设置自定义高度不生效。但是如果不使用ant desgin pro +umi 那套框架时,就可以随意设置。不知道为啥!!不知道有没有大神帮忙解惑.。。。。。。