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,
IndeterminateCir cula rProgressIndicator,
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>
<IndeterminateCir cula rProgressIndicator 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
如果觉得 网站内容还不错,欢迎将 网站 推荐给程序员好友。