当前位置：首页 > news >正文

react 中，使用antd layout布局中的sider 做sider的展开和收起功能

news 2025/9/18 6:52:35

一话不多说，先展示效果：

展开时：

收起时：

二、实现代码如下

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 那套框架时，就可以随意设置。不知道为啥！！不知道有没有大神帮忙解惑.。。。。。。