一 話不多說，先展示效果：
展開時：
收起時：
二、實現代碼如下
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 那套框架時，就可以隨意設置。不知道為啥！！不知道有沒有大神幫忙解惑.。。。。。。
)
