React Desktop React UI 桌面组件开源项目

我要开发同款
匿名用户2015年10月19日
80阅读
开发技术JavaScript
所属分类Web应用开发、网页组件
授权协议MIT

作品详情

ReactDesktop是基于FacebookReactJS的JavaScript库,为OSXEICapitan和Windows10提供Web原生桌面体验,支持node-webkit和Electron.js,但可以在任意JavaScript驱动的项目使用。

在线演示:https://gabrielbull.github.io/react-desktop/demo/ 

安装:

npm install react-desktop --saveOSXElCapitan

Windows10

简单使用:

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>    );  }}
声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态

评论