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>
    );
  }
}

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://web.fly63.com/nav/1562