react-desktop 介绍
react Desktop 是提供给 OS X El Capitan 和 Windows 10 的 react UI 组件。一个使用react编写的web桌面。使用typescript来编写逻辑,react来编写view,jade写基本的dom结构,打包工具使用webpack。
react-desktop 是基于 Facebook reactjs 的 JavaScript 库,为 OS X EI Capitan 和 Windows 10 提供 Web 原生桌面体验,支持 node-webkit 和 Electron.js,但可以在任意 JavaScript 驱动的项目使用。
安装:
npm install react-desktop --save
简单使用:
import react from 'react';
import {
Window,
TitleBar,
PushButton,
TextField,
Toolbar,
Box,
SegmentedControl,
IndeterminateCircularProgressIndicator,
Form,
Label
} from 'react-desktop';
class MyApp extends React.Component {
constructor() {
super();
this.state = { selectedTab: 'login' };
}
render() {
return (
<Window>
<TitleBar
title="My App"
controls
onClosePress={() => { alert('close'); }}
onResizePress={() => { alert('resize'); }}
onMinimizePress={() => { alert('minimize'); }}
>
<Toolbar/>
</TitleBar>
<Box>
<SegmentedControl>
<SegmentedControl.Item
title="Login"
selected={this.state.selectedTab === 'login'}
onPress={() => { this.setState({ selectedTab: 'login' }) } }
>
<Form onSubmit={() => { alert('submit'); }}>
<Label color="red">Error</Label>
<Form.Row>
<Label>Username</Label>
<TextField defaultValue="" placeholder="Username"/>
</Form.Row>
<Form.Row>
<PushButton onPress={() => { alert('cancel'); }}>Cancel</PushButton>
<PushButton onPress="submit" color="blue">Submit</PushButton>
<IndeterminateCircularProgressIndicator visible absolute/>
</Form.Row>
</Form>
</SegmentedControl.Item>
</SegmentedControl>
</Box>
</Window>
);
}
}
网站地址:http://reactdesktop.js.org
GitHub:https://github.com/gabrielbull/react-desktop
网站描述:模拟 macOS 和 Windows 10 桌面效果的 React UI 组件
react-desktop
官方网站:http://reactdesktop.js.org
小编说
以上是编程之家为你收集整理的react-desktop全部内容。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。