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

news2025/3/4 6:48:31

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

展开时:

收起时:

二、实现代码如下

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.coloradmin.cn/o/2309351.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

easyExcel使用案例有代码

easyExcel 入门,完成web的excel文件创建和导出 easyExcel官网 EasyExcel 的主要特点如下&#xff1a; 1、高性能&#xff1a;EasyExcel 采用了异步导入导出的方式&#xff0c;并且底层使用 NIO 技术实现&#xff0c;使得其在导入导出大数据量时的性能非常高效。 2、易于使…

苹果廉价机型 iPhone 16e 影像系统深度解析

【人像拍摄差异】 尽管iPhone 16e支持后期焦点调整功能&#xff0c;但用户无法像iPhone 16系列那样通过点击屏幕实时切换拍摄主体。前置摄像头同样缺失人像深度控制功能&#xff0c;不过TrueTone原彩闪光灯系统在前后摄均有保留。 很多人都高估了 iPhone 的安全性&#xff0c;查…

视觉图像坐标转换

1. 透镜成像 相机的镜头系统将三维场景中的光线聚焦到一个平面&#xff08;即传感器&#xff09;。这个过程可以用小孔成像模型来近似描述&#xff0c;尽管实际相机使用复杂的透镜系统来减少畸变和提高成像质量。 小孔成像模型&#xff1a; 假设有一个理想的小孔&#xff0c;…

脚本无法获取响应主体(原因:CORS Missing Allow Credentials)

背景&#xff1a; 前端的端口号8080&#xff0c;后端8000。需在前端向后端传一个参数&#xff0c;让后端访问数据库去检测此参数是否出现过。涉及跨域请求&#xff0c;一直有这个bug是404文件找不到。 在修改过程当中不小心删除了一段代码&#xff0c;出现了这个bug&#xff0…

leetcode第39题组合总和

原题出于leetcode第39题https://leetcode.cn/problems/combination-sum/description/题目如下&#xff1a; 给你一个 无重复元素 的整数数组 candidates 和一个目标整数 target &#xff0c;找出 candidates 中可以使数字和为目标数 target 的 所有 不同组合 &#xff0c;并以…

SQLark 数据迁移|断点续迁已上线(Oracle-达梦)

数据迁移是 SQLark 最受企业和个人用户欢迎的功能之一&#xff0c;截止目前已帮助政府、金融、能源、通信等 50 家单位完成从 Oracle、MySQL 到达梦的全量迁移&#xff0c;自动化迁移成功率达 96% 以上。 在 Oracle 到达梦数据库迁移过程中&#xff0c;SQLark V3.3 新增 断点续…

Element Plus中el-tree点击的节点字体变色加粗

el-tree标签设置 <el-tree class"tree":data"treeData":default-expand-all"true":highlight-current"true"node-click"onTreeNodeClick"><!-- 自定义节点内容&#xff0c;点击的节点字体变色加粗 --><!-- 动…

vmware安装firepower ftd和fmc

在vmware虚拟机中安装cisco firepower下一代防火墙firepower threat defence&#xff08;ftd&#xff09;和管理中心firepower management center&#xff08;fmc&#xff09;。 由于没有cisco官网下载账号&#xff0c;无法下载其中镜像。使用eveng模拟器中的ftd和fmc虚拟镜像…

计算机毕业设计SpringBoot+Vue.js医院资源管理系统(源码+文档+PPT+讲解)

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…

[含文档+PPT+源码等]精品基于Python实现的微信小程序的乡村医疗咨询系统

基于Python实现的微信小程序的乡村医疗咨询系统背景&#xff0c;可以从以下几个方面进行阐述&#xff1a; 一、社会背景 医疗资源分布不均&#xff1a;在我国&#xff0c;城乡医疗资源分布不均是一个长期存在的问题。乡村地区由于地理位置偏远、经济条件有限&#xff0c;往往…

Python实现GO鹅优化算法优化BP神经网络回归模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后关注获取。 1.项目背景 传统BP神经网络的局限性&#xff1a;BP&#xff08;Back Propagation&#xff09;神经网络作为一种…

7.1.2 计算机网络的分类

文章目录 分布范围交换方式 分布范围 计算机网络按照分布范围可分为局域网、广域网、城域网。局域网的范围在10m~1km&#xff0c;例如校园网&#xff0c;网速高&#xff0c;主要用于共享网络资源&#xff0c;拓扑结构简单&#xff0c;约束少。广域网的范围在100km&#xff0c;例…

千峰React:Hooks(上)

什么是Hooks ref引用值 普通变量的改变一般是不好触发函数组件的渲染的&#xff0c;如果想让一般的数据也可以得到状态的保存&#xff0c;可以使用ref import { useState ,useRef} from reactfunction App() {const [count, setCount] useState(0)let num useRef(0)const h…

[Windows] 免费电脑控制手机软件 极限投屏_正式版_3.0.1 (QtScrcpy作者开发)

[Windows] 极限投屏_正式版 链接&#xff1a;https://pan.xunlei.com/s/VOKJf8Z1u5z-cHcTsRpSd89tA1?pwdu5ub# 新增功能(Future)&#xff1a; 支持安卓14(Supports Android 14)提高投屏成功率(Improve the success rate of mirror)加快投屏速度(Accelerate screen mirrorin…

C++初阶—list类

第一章&#xff1a;list的介绍及使用 1.1 list的介绍 list是可以在常数范围内在任意位置进行插入和删除的序列式容器&#xff0c;并且该容器可以前后双向迭代。list的底层是双向链表结构&#xff0c;双向链表中每个元素存储在互不相关的独立节点中&#xff0c;在节点中通过指…

【子网掩码计算器:Python + Tkinter 实现】

子网掩码计算器&#xff1a;Python Tkinter 实现 引言代码功能概述代码实现思路1. 界面设计2. 功能实现3. 事件处理 子网掩码计算器实现步骤1. 导入必要的库2. 定义主窗口类 SubnetCalculatorApp3. 创建菜单栏4. 创建界面组件5. 判断 IP 地址类别6. 计算子网信息7. 其他功能函…

入门基础项目(SpringBoot+Vue)

文章目录 1. css布局相关2. JS3. Vue 脚手架搭建4. ElementUI4.1 引入ElementUI4.2 首页4.2.1 整体框架4.2.2 Aside-logo4.2.3 Aside-菜单4.2.4 Header-左侧4.2.5 Header-右侧4.2.6 iconfont 自定义图标4.2.7 完整代码 4.3 封装前后端交互工具 axios4.3.1 安装 axios4.3.2 /src…

车载以太网-基于linux的ICMP协议

对于车载以太网-ICMP的技术要求: /** ICMP报文格式解析* -----------------* ICMP协议用于网络诊断和错误报告,常见应用包括Ping测试。* ICMP报文结构包括:IP头部、ICMP头部和ICMP数据部分。* 下面详细介绍每个部分的结构、字段的作用以及如何解析它们。* * ICMP头部结构:*…

虚拟机快照与linux的目录结构

虚拟机快照是对虚拟机某一时刻状态的完整捕获&#xff0c;包括内存、磁盘、配置及虚拟硬件状态等&#xff0c;保存为独立文件。 其作用主要有数据备份恢复、方便系统测试实验、用于灾难恢复以及数据对比分析。具有快速创建和恢复、占用空间小、可多个快照并存的特点。在管理维…

Unity小功能实现:鼠标点击移动物体

1、功能描述 当玩家点击鼠标时&#xff0c;场景中的物体会移动到鼠标点击的位置。这个功能可以用于控制角色移动、放置物体等场景。 2、实现步骤 创建Unity项目&#xff1a;首先&#xff0c;打开Unity并创建一个新的3D项目。 添加3D物体&#xff1a;在场景中创建一个3D物体&am…