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

news/2025/2/27 6:18:20

一 话不多说,先展示效果:

展开时:

收起时:

二、实现代码如下

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


http://www.niftyadmin.cn/n/5869627.html

相关文章

安装react报错

安装react报错 背景 执行命令npx create-react-app my-app&#xff0c;然后出现报错unable to resolve dependency tree 解决&#xff1a; 出现这个报错是因为依赖包版本出现冲突&#xff0c;查看package.json可以看到react版本是19.0.0&#xff0c;但是testing-library/rea…

理解梯度消失与梯度爆炸及其缓解策略

目录 理解梯度消失与梯度爆炸及其缓解策略 一、梯度消失与梯度爆炸的概念 1. 梯度消失 2. 梯度爆炸 二、缓解梯度消失与爆炸的策略 1. 改进权重初始化 2. 选择合适的激活函数 3. 使用归一化技术 4. 梯度裁剪&#xff08;Gradient Clipping&#xff09; 5. 结构设计改…

NLP07-朴素贝叶斯问句分类之数据集加载(1/3)

一、概述 数据集加载&#xff08;Dataset Loading&#xff09;是机器学习、自然语言处理&#xff08;NLP&#xff09;等领域中的一个重要步骤&#xff0c;指的是将外部数据&#xff08;如文件、数据库、网络接口等&#xff09;加载到程序中&#xff0c;以便进行后续处理、分析…

PydanticToolsParser 工具(tool call)把 LLM 生成的文本转成结构化的数据(Pydantic 模型)过程中遇到的坑

PydanticToolsParser 的作用 PydanticToolsParser 是一个工具&#xff0c;主要作用是 把 LLM 生成的文本转成结构化的数据&#xff08;Pydantic 模型&#xff09;&#xff0c;让代码更容易使用这些数据进行自动化处理。 换句话说&#xff0c;AI 生成的文本通常是自然语言&…

SAP Webide系列(7)- 优化FreeStyle新建项目预设模板

目录 一、背景 二、优化目标 三、定位调整点 四、调整步骤 五、效果展示 六、附言 一、背景 在每次通过Webide进行FreeStyle方式自开发SAP UI5应用的时候&#xff0c;新建项目&#xff0c;得到的模板文件都是只有很少的内容&#xff08;没有路由配置、没有设置默认全屏等…

27.[前端开发-JavaScript基础]Day04-函数基本使用-递归-变量作用域-函数式编程

一、JavaScript函数 1 认识JavaScript函数 程序中的foo、bar、baz 认识函数 函数使用的步骤 2 函数的声明和调用 声明和调用函数 函数的参数 有参数的函数练习 函数的返回值 函数的练习 arguments参数&#xff08;JS高级再学习&#xff09; 3 函数的递归调用 函数中…

本地大模型编程实战(24)用智能体(Agent)实现智能纠错的SQL数据库问答系统(3)

本文将实现这样一个 智能体(Agent) &#xff1a; 可以使用自然语言对 SQLite 数据库进行查询。即&#xff1a;用户用自然语言提出问题&#xff0c;智能体也用自然语言根据数据库的查询结果回答问题。增加一个自动对查询中的专有名词进行纠错的工具&#xff0c;这将明显提升查询…

CAS (Compare and swap “比较和交换“) [ Java EE 初阶 ]

目录 什么是 CAS CAS 是怎么实现的 CAS 有哪些应用 1. 实现原子类 2. 实现自旋锁 3. CAS 的 ABA 问题 什么是 CAS // 能够比较和交换某个寄存器中的值和内存中的值, 看是否相等, 如果相等, 则把另一个寄存器中的值和内存中的值进行交换 // CAS伪代码 boolean CAS(addres…