react写一个从下往上划出的弹框弹窗组件

arco的弹窗还是不够丰富啊 , 还是自己造吧  。 看着垃圾 , 但可塑性强呀 ,拿去改改就能用 , 乱七八糟的ui组件库太多 ,轮子还是慢慢造吧 

组件的样式使用的是tailwindcss  ,有需要自查吧 ,但大概也是能够看出 ,什么css属性 , ,,写

import { useState, useEffect} from "react"const SlideUpWindow = ({ children, isOpen, onClose }) => {const [isVisible, setIsVisible] = useState(false);useEffect(() => {setIsVisible(isOpen);}, [isOpen]);const handleClose = () => {setIsVisible(false);if (onClose) {onClose();}};return (<divstyle={{border:'1px solid red'}}className={`fixed bottom-0 right-0 w-[37%] transition-transform duration-300 h-[580px] ${isVisible ? 'translate-y-0  right-[3%] bottom-[4%]' : 'translate-y-full'}`}><div className="flex justify-end"><buttononClick={handleClose}className="p-2 text-white bg-gray-700 rounded-full focus:outline-none focus:bg-gray-800"><svgxmlns="http://www.w3.org/2000/svg"className="w-6 h-6"fill="none"viewBox="0 0 24 24"stroke="currentColor"><pathstrokeLinecap="round"strokeLinejoin="round"strokeWidth={2}d="M6 18L18 6M6 6l12 12"/></svg></button></div><div className="bg-white rounded-t-lg shadow-lg">{children}</div></div>);
};
export default SlideUpWindow;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/3013.shtml

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

相关文章

01.JAVAEE初阶之计算机如何工作

1.一台机器如何组成 冯诺依曼体系 CPU 中央处理器: 进行算术运算和逻辑判断.存储器: 分为外存和内存, 用于存储数据(使用二进制方式存储)输入设备: 用户给计算机发号施令的设备.输出设备: 计算机个用户汇报结果的设备. 针对存储空间 硬盘 > 内存 >> CPU针对数据访问…

十大排序算法详解-上篇:比较排序算法【python 动态图解】

作者介绍&#xff1a;10年大厂数据\经营分析经验&#xff0c;现任大厂数据部门负责人。 会一些的技术&#xff1a;数据分析、算法、SQL、大数据相关、python 欢迎加入社区&#xff1a;码上找工作 作者专栏每日更新&#xff1a; LeetCode解锁1000题: 打怪升级之旅 python数据分析…

已解决java.nio.BufferOverflowException: 缓冲区溢出异常的正确解决方法,亲测有效!!!

已解决java.nio.BufferOverflowException: 缓冲区溢出异常的正确解决方法&#xff0c;亲测有效&#xff01;&#xff01;&#xff01; 目录 问题分析 报错原因 解决思路 解决方法 检查剩余空间 调整缓冲区大小 管理position和limit属性 总结 博主v&#xff1a;XiaoMin…

nginx 配置 SSL 证书实现 https 访问

nginx 配置SSL证书实现https访问 1. SSL 证书简介与获取1.1 SSL 证书介绍1.2 获取 SSL 证书 2. nginx 配置 SSL 文件2.1 SSL 文件放置与配置文件修改2.1.1 文件配置2.1.2 强制 https 访问 2.2 验证配置结果 同步发布在个人笔记 nginx 配置 SSL 证书实现 https 访问 配置好 ngi…

LabVIEW和MES系统的智能化车间数据对接

LabVIEW和MES系统的智能化车间数据对接 随着工业4.0时代的到来&#xff0c;智能制造成为推动制造业高质量发展的重要手段。其中&#xff0c;数字化车间作为智能制造的重要组成部分&#xff0c;其设计与实现至关重要。在数字化车间环境下&#xff0c;如何利用LabVIEW软件与MES系…

Android Radio实战——获取音频补丁异常分析(二十一)

上一篇文章介绍了 Radio 开发中获取音频补丁的相关流程,这一篇来看一下获取流程中出现的一个 Bug 分析 一、异常Log分析 1、Log内容 收到这样一份 ANR 异常Log: "main" prio=5 tid=1 Native| group="main" sCount=1 dsCount=0 flags=1 obj=0xxxxx sel…

Spark pivot数据透视从句

1. 概念2. 实战 2.1. 新列的决定因素2.2. 新列别名2.3. column_list中指定多个字段2.4. 多个聚合函数的使用2.5. 最终出现在SQL结果中的决定因素 Spark pivot数据透视从句 1. 概念 描述 用于数据透视&#xff0c;根据特定的列获取聚合值&#xff0c;聚合值将转换为select子句…

求最小公倍数

两种方法 1.直接求 import java.util.Scanner;/*** HJ108 求最小公倍数 - 简单*/ public class HJ108 {public static void main(String[] args) {Scanner sc new Scanner(System.in);while(sc.hasNextInt()){int n1 sc.nextInt();int n2 sc.nextInt();for(int i 1; i &l…

quasar框架切换Tab页使用<keep-alive>缓存

写法1 : 使用quasar的q-tabs组件使用方法 //布局样式根据需求自己设置 <template><div class"all-Tabs"><q-tabs v-model"activeTabName" update:model-value"selectedChange"><q-tabv-for"(item, index) in cardAr…

Elasticsearch 索引数据多了,调优,部署方案

1&#xff1a;动态索引层面 基于 模板时间rollover api 滚动 创建索引&#xff0c;举例&#xff1a;设计阶段定义&#xff1a;blog 索引的模板格式为&#xff1a;blog_index_时间戳的形式&#xff0c;每天递增数据。这样做的好处&#xff1a;不至于数据量激增导致单个索引数据量…

sklearn混淆矩阵的计算和seaborn可视化

为了计算语义分割的指标miou&#xff0c;需要生成的中间过程就是混淆矩阵。 iou intersection / union 每个类别的平均iou就是mean iou。 使用sklearn自带的confusion_matrix能很容易生成混淆矩阵&#xff0c;可以进行混淆矩阵的可视化观察哪个类别分割的不好。 from skle…

【go从入门到精通】深入剖析反射

作者简介: 高科,先后在 IBM PlatformComputing从事网格计算,淘米网,网易从事游戏服务器开发,拥有丰富的C++,go等语言开发经验,mysql,mongo,redis等数据库,设计模式和网络库开发经验,对战棋类,回合制,moba类页游,手游有丰富的架构设计和开发经验。 (谢谢你…

OAuth2、JWT

文章目录 OAuth2JWT OAuth2 官网&#xff1a; https://oauth.net/2/ 在 RFC 6749 中说明 1、资源所有者 resource owner&#xff0c; 如 github 用户 2、客户端/第三方应用 client&#xff0c; 如 支持github 登录的 csdn 3、资源服务器 resource server&#xff0c; 如 4、授…

深入浅出MySQL-04-【常用函数】

前言 环境&#xff1a; Window11MySQL-8.0.35 1.字符串函数 最常用的一种函数。 注意&#xff1a;在 MySQL 中&#xff0c;字符串的下标&#xff08;或称为索引&#xff09;是从 1 开始的&#xff0c;而不是从 0 开始。 函数功能CONCAT(s1, s2, …, sn)连接s1, s2, …, s…

【高阶数据结构】B树 {B树的概念;B树的实现:节点设计,查找,插入,遍历,删除;B树的性能分析;B+树和B*树;B树的应用}

一、常见的搜索结构 以上结构适合用于数据量相对不是很大&#xff0c;能够一次性存放在内存中&#xff0c;进行数据查找的场景。如果数据量很大&#xff0c;比如有100G数据&#xff0c;无法一次放进内存中&#xff0c;那就只能放在磁盘上了&#xff0c;如果放在磁盘上&#xff…

如何查看连接的Linux服务器是ubuntu还是centos

测试环境 Ubuntu 22.04.4CentOS Linux release 7.9.2009 (Core) centos使用以下命令 cat /etc/centos-release结果 CentOS Linux release 7.9.2009 (Core)或者 cat /etc/issue结果 \S Kernel \r on an \mubuntu使用以下命令 cat /etc/issue结果 Ubuntu 22.04.4 LTS \n …

全局路线规划导读

系列文章目录 提示&#xff1a;这里可以添加系列文章的所有文章的目录&#xff0c;目录需要自己手动添加 TODO:写完再整理 文章目录 系列文章目录前言一、全局路径探索的介绍二、基于定位的全局航线的录制方法扩展阅读可参考 三、曲线拟合的方法--Dubins曲线与Reeds-Shepp曲线…

Linux系统安全:从面临的攻击和风险到安全加固、安全维护策略(文末有福利)

1. Linux面临的攻击与风险 1.1. Linux系统架构 Linux系统架构解读&#xff1a; 用户之间隔离内核态与用户态之间隔离用户进程一般以低权限用户运行系统服务一般以特权服务运行用户态通过系统调用进入内核态内核对系统资源进行管理和分配 1.2. Linux系统常见安全威胁 1.2.1.…

Qt/C++音视频开发71-指定mjpeg/h264格式采集本地摄像头/存储文件到mp4/设备推流/采集推流

一、前言 用ffmpeg采集本地摄像头&#xff0c;如果不指定格式的话&#xff0c;默认小分辨率比如640x480使用rawvideo格式&#xff0c;大分辨率比如1280x720使用mjpeg格式&#xff0c;当然前提是这个摄像头设备要支持这些格式。目前市面上有一些厂家做的本地设备支持264格式&am…

目标检测——YOLOv7算法解读

论文&#xff1a;YOLOv7: Trainable bag-of-freebies sets new state-of-the-art for real-time object detectors (2022.7.6) 作者&#xff1a;Chien-Yao Wang, Alexey Bochkovskiy, Hong-Yuan Mark Liao 链接&#xff1a;https://arxiv.org/abs/2207.02696 代码&#xff1a;h…