react配合modal实现progress进度条

一、简单版，入门

1.学习网址：https://material-ui.com/demos/progress/

2.新建一个test.js

npm install @material-ui/core --save

然后将如下代码复制到test.js上

import React, { Component } from 'react';
import CircularProgress from '@material-ui/core/CircularProgress';
import './test.css'
class test extends Component {render(){return (<div className="progress"><CircularProgress className={this.props.progress} /></div>);}
}
export default test;

然后在App.js输入如下代码

import React, { Component } from 'react';
import './App.css';
import Test from './test'
class App extends Component {constructor(props) {super(props);}render() {return (<div className="App"><Test /></div>);}
}
export default App;

3.效果图如下，页面内一个圆圈在不断旋转

二、结合modal，一起应用到实际项目中，点击按钮时，旋转

1.学习modal的网址：

https://github.com/reactjs/react-modal

2.仍然使用上面提到的test.js，代码完全相同。

npm install @material-ui/core --save

npm install react-modal --save

然后在App.js输入如下代码

import React, { Component } from 'react';
import './App.css';
import Progress from './test'
import Modal from 'react-modal';
Modal.setAppElement('div');
const customStyles = {content: {top: '50%',left: '50%',right: 'auto',bottom: 'auto',marginRight: '-50%',transform: 'translate(-50%, -50%)',border: '0'}
};
class App extends Component {constructor(props) {super(props);this.state = {modalIsOpen: false};this.change = this.change.bind(this);this.openModal = this.openModal.bind(this);this.afterOpenModal = this.afterOpenModal.bind(this);this.closeModal = this.closeModal.bind(this);}openModal() {this.setState({ modalIsOpen: true });}change(){this.setState({ modalIsOpen: true });}afterOpenModal() {// this.subtitle.style.color = '#f00';}closeModal() {this.setState({ modalIsOpen: false });}render() {return (<div className="App"><ModalisOpen={this.state.modalIsOpen}onAfterOpen={this.afterOpenModal}onRequestClose={this.closeModal}style={customStyles}><Progress /></Modal><button onClick={this.change}>点击显示modal</button></div>);}
}
export default App;

3.效果图如下：

三、线状progress

import React, { Component } from 'react';
import LinearProgress from '@material-ui/core/LinearProgress';
class App extends Component {render() {return (<div><LinearProgress /></div>);}
}
export default App;

react配合modal实现progress进度条相关推荐

微信小程序进度条样式_微信小程序组件progress进度条解读和分析
progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行. progress进度条是微信小程序的组件,和HTML5的进度条progress类似. pr ...
linux dd 进度条,Progress 进度条 – DDProgressHUD
DDProgressHUD Progress 进度条,UIActivityIndicatorView 小菊花,弹窗,状态显示,高度自定义 DDProgressHUD的介绍提供了四种类型的展示: 显示 ...
微信小程序 MinUI 组件库系列之 progress 进度条组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多基础 ...
html进度条实现原理,HTML5 progress进度条详解
HTML5 progress 元素简介 progress是HTML5的一个新元素,表示定义一个进度条,用途很广泛,可以用在文件上传的进度显示,文件下载的进度显示,也可以作为一种loading的加载状态 ...
elementui进度条如何设置_ElementUI之Progress进度条底色设置
ElementUI中Progress进度条组件官网给了如下属性: 这里的color很好理解就是显示实际进度的颜色(个人觉得叫背景色不太好).但是官网并没有给出设置底色的属性,只给了一个默认的颜色,F1 ...
直播平台搭建源码，uniapp progress进度条
直播平台搭建源码,uniapp progress进度条 .progress-container {height: 20rpx;display: flex;flex-direction: row;ali ...
微信小程序组件解读和分析：六、progress进度条
progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行. progress进度条是微信小程序的组件,和HTML5的进度条progress类似. pr ...
Flutter进度条Flutter圆形进度条Flutter条形进度条Flutter Progress进度条LinearProgressIndicator
更多文章请查看 flutter从入门到精通 Flutter Progress 1 条形无固定值进度条 //LinearProgressIndicator不具备设置高度的选项,可以使用SizedBox ...
bootstrap3的 progress 进度条
: 2.3版 3.0版 .bar .progress-bar .bar-* .progress-bar-* 2.代码: [html] view plaincopy < ...
微信小程序进度条样式_微信小程序—progress(进度条)
设置进度条颜色(请使用十六进制颜色值,例如:#ff00ff) 未选择的进度条的颜色(请使用十六进制颜色值,例如:#ff00ff) 设置/取消进度条从左往右的动画设置/取消进度条右侧显示百分比 //获 ...

react配合modal实现progress进度条

react配合modal实现progress进度条相关推荐

最新文章

热门文章