ReactDesktop是基于FacebookReactJS的JavaScript库,为OSXEICapitan和Windows10提供Web原生桌面体验,支持node-webkit和Electron.js,但可以在任意JavaScript驱动的项目使用。
在线演示:https://gabrielbull.github.io/react-desktop/demo/
安装:
npm install react-desktop --saveOSXElCapitanWindows10简单使用:
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> ); }}
评论