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 (
        <div
            style={{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">
                <button
                    onClick={handleClose}
                    className="p-2 text-white bg-gray-700 rounded-full focus:outline-none focus:bg-gray-800"
                >
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        className="w-6 h-6"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                    >
                        <path
                            strokeLinecap="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;
相关推荐
用户4081281200381几秒前
大文件分片上传和断点续传
前端
极客悟道几秒前
颠覆传统虚拟化:在Docker容器中运行Windows系统的开源黑科技
前端·后端
前端康师傅2 分钟前
JavaScript 中你不知道的按位运算
前端·javascript
小桥风满袖4 分钟前
Three.js-硬要自学系列38之专项学习缓冲几何体
前端·css·three.js
Rubin935 分钟前
埋点方案实现
前端
斯~内克9 分钟前
Centrifugo 深度解析:构建高性能实时应用的开源引擎
前端·开源
tianchang20 分钟前
策略模式(Strategy Pattern)深入解析与实战应用
前端·javascript·代码规范
best66623 分钟前
JavaScript的Math内置对象,到底是何方神圣?
javascript
前端小盆友25 分钟前
从零实现一个GPT 【React + Express】--- 【3】解析markdown,处理模型记忆
gpt·react.js
掘金安东尼29 分钟前
技术解析:高级 Excel 财务报表解析器的架构与实现
前端·javascript·面试