React DesktopReact UI 桌面组件
React Desktop 是基于 Facebook ReactJS 的 JavaScript 库,为 OS X EI Capitan 和 Windows 10 提供 Web 原生桌面体验,支持 node-webkit 和 Electron.js,但可以在任意 JavaScript 驱动的项目使用。
在线演示:http://gabrielbull.github.io/react-desktop/demo/
安装:
npm install react-desktop --save
OS X El Capitan
Windows 10
简单使用:
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> ); } }
评论