#yyds干货盘点 react笔记之学习之添加弹框提示

简介: #yyds干货盘点 react笔记之学习之添加弹框提示

js部分 model.js

import './ComfirmModal.css';
import Card from "../Card/Card";
const ConfirmModal = props => {
    return <Card className="confirmModal">
        <div className="confirmText">
            <p>该操作不可恢复!确认吗?</p>
        </div>
        <div className="confirmButton">
            <button className="okButton">确认</button>
            <button>取消</button>
        </div>
    </Card>;
};
export default ConfirmModal;

样式 model.css

.confirmModal{
    display: flex;
    flex-flow: column;
    width: 400px;
    height: 200px;
    padding: 10px;
    background-color: #fff;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.confirmText{
    display: flex;
    height: 150px;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    color: #D62828;
}
.confirmButton{
    flex: auto;
    display: flex;
    justify-content: flex-end;
}
.confirmButton button{
    width: 80px;
    margin: 0 10px;
    border: none;
    background-color: #EAE2B7;
    font-weight: bold;
    font-size: 18px;
}
.confirmButton .okButton{
    background-color: #D62828;
    color: white;
}
相关文章
|
9天前
|
开发框架 前端开发 JavaScript
从零开始学习React Native开发
React Native是一种基于React框架的移动端开发框架,使用它可以快速地构建出高性能、原生的移动应用。本文将从零开始,介绍React Native的基础知识和开发流程,帮助读者快速入门React Native开发,并实现一个简单的ToDo应用程序。
|
2月前
|
人工智能 JSON 前端开发
react17+ts 学习
react17+ts 学习
|
7天前
|
存储 前端开发 JavaScript
从零开始学习React Native开发
【2月更文挑战第1天】React Native是一种跨平台的移动应用程序框架,可以使用JavaScript和React来构建Android和iOS应用程序。本文将带您从零开始学习React Native开发,涵盖了基础知识、组件、样式、布局、API等方面。
|
1月前
|
Rust 前端开发 JavaScript
IM跨平台技术学习(十):快速对比跨平台框架Electron、Flutter、Tauri、React Native等
在本文中,我们将比较五种流行的桌面应用程序开发框架:Electron、Flutter、Tauri、React Native 和 Qt,希望可以帮助你根据项目需求做出明智的技术选型决策。
64 2
|
2月前
|
前端开发 JavaScript API
中国农村大学生学习了这个【React教程】迎娶导师女儿,出任CEO走上人生巅峰
中国农村大学生学习了这个【React教程】迎娶导师女儿,出任CEO走上人生巅峰
27 0
|
2月前
|
前端开发 JavaScript
前端知识笔记(二十六)———React如何像Vue一样将css和js写在同一文件
前端知识笔记(二十六)———React如何像Vue一样将css和js写在同一文件
25 1
|
2月前
|
前端开发
【React学习】—SetState的使用(九)
【React学习】—SetState的使用(九)
|
2月前
|
前端开发 JavaScript
【React学习】—React中的事件绑定(八)
【React学习】—React中的事件绑定(八)
|
2月前
|
前端开发
【React学习】—组件三大核心属性: state(七)
【React学习】—组件三大核心属性: state(七)
|
2月前
|
前端开发
【React学习】—类式组件(六)
【React学习】—类式组件(六)
【React学习】—类式组件(六)

相关产品

  • 云迁移中心