# react-DnR
==============
Draggable and Resizable window build with React.js.
Try it out here: http://yongxu.ren/react-DnR/
Installation
============
The easiest way to use react-DnR is to install it from npm and include it in your React build process (using [Webpack](http://webpack.github.io/), [Browserify](http://browserify.org/), etc).
```
npm install --save react-dnr
```
Example
=====
```jsx
import React from "react";
import ReactDOM from "react-dom";
import DnR from '../modules/DnR';
import {OSXTheme, WindowsTheme} from '../modules/themes';
const paneStyle = {
width: '80%',
height: '50%',
top: '25%',
left: '10%',
backgroundColor: 'rgba(0, 0, 0, 0.2)'
};
const buttonStyle = {
paddingLeft: 10,
textAlign: 'center'
};
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
minimize: false
};
this.OSX = OSXTheme({
title: 'OSX Theme',
onClose: ()=>this.refs.subdnr.minimize(),
onMinimize: ()=>this.refs.subdnr.minimize(),
onMaximize: ()=>this.refs.subdnr.maximize(),
});
this.Windows = WindowsTheme({
title: 'React DnR',
onClose: ()=>this.refs.dnr.minimize(),
onMinimize: ()=>this.refs.dnr.minimize(),
onMaximize: ()=>this.refs.dnr.maximize(),
});
}
render() {
return (
<div style={{
background:'#3a7bd5',
top: 0,
left : 0,
width: '100%',
height: '100%',
position: 'fixed',
backgroundImage: `url(${require('../img/bg1.png')})`
}}>
<div style={{
display: 'flex',
alignItems: 'center',
verticalAlign: 'baseline',
padding: 10,
}}>
<button
style={buttonStyle}
onClick={()=>this.refs.dnr.minimize()}>
minimize
</button>
<button
style={buttonStyle}
onClick={()=>this.refs.dnr.maximize()}>
maximize
</button>
<button
style={buttonStyle}
onClick={()=>this.refs.dnr.restore()}>
restore
</button>
</div>
<DnR
ref='dnr'
{...this.Windows}
cursorRemap={(c) => c === 'move' ? 'default' : null}
style={paneStyle}>
<button
onClick={()=>this.refs.subdnr.minimize()}>
minimize
</button>
<button
onClick={()=>this.refs.subdnr.transform({
top: 0,
left: 0,
width: this.refs.dnr.getFrameRect().width,
height: this.refs.dnr.getFrameRect().height})}>
maximize
</button>
<button
onClick={()=>this.refs.subdnr.restore()}>
restore
</button>
<DnR
ref='subdnr'
{...this.OSX}
cursorRemap={(c) => c === 'move' ? 'default' : null}
style={paneStyle}
boundary={{top: 0}}>
content
</DnR>
</DnR>
</div>
);
}
}
ReactDOM.render(<App/>, document.getElementById("main"));
```
没有合适的资源?快使用搜索试试~ 我知道了~
react-reactdnr采用Reactjs构建的可拖动和可调整大小的窗口
共25个文件
js:13个
jsx:4个
map:1个
需积分: 50 5 下载量 137 浏览量
2019-08-15
02:28:35
上传
评论
收藏 2.43MB ZIP 举报
温馨提示
react-dnr - 采用React.js构建的可拖动和可调整大小的窗口
资源推荐
资源详情
资源评论
收起资源包目录
react-reactdnr采用Reactjs构建的可拖动和可调整大小的窗口.zip (25个子文件)
react-DnR-master
.babelrc 47B
img
bg1.png 448KB
package.json 2KB
umd
DnR.js 691KB
index.html 2KB
LICENSE 729B
dist
bundle.js.map 3MB
bundle.js 833KB
src
index.js 2KB
es6
DnR.js 16KB
index.js 451B
themes.js 9KB
shadow.js 3KB
.gitignore 140B
webpack.config.js 2KB
lib
DnR.js 16KB
index.js 451B
themes.js 9KB
shadow.js 3KB
README.md 3KB
webpack.build.config.js 683B
modules
index.jsx 58B
themes.jsx 5KB
DnR.jsx 12KB
shadow.jsx 406B
共 25 条
- 1
资源评论
weixin_39840387
- 粉丝: 784
- 资源: 3万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功