React-desktop

模拟 macOS 和 Windows 10 桌面效果的 React UI 组件

暂无中文翻译,

React Desktop

Build Status Code Climate Dependency Status devDependency Status npm downloads npm version Gitter

React UI Components for OS X El Capitan and Windows 10.

npm install react-desktop --save

Demo

Contributing

This library has been created to bring a native desktop experience to the web. It works extremely well with tools such as node-webkit or Electron.js!

Everyone is welcome to contribute and add more components/documentation whilst following the contributing guidelines.

Documentation

Guides on installation, components and advanced usage are found in the documentation.

Todos OS X

  • [x] Window
  • [x] Title Bar
  • [x] Toolbar
  • [ ] Space Toolbar Item
  • [ ] Flexible Space Toolbar Item
  • [x] Segmented Control
  • [x] Box
  • [x] Label
  • [x] Form
  • [x] Push Button
  • [ ] Textured Rounded Button
  • [ ] Gradient Button
  • [ ] Pop Up Button
  • [ ] Check Box Button
  • [ ] Radio Button
  • [x] Text Field
  • [ ] Search Field
  • [ ] Secure Text Field
  • [x] Indeterminate Circular Progress Indicator

Todos Windows

  • [x] Window
  • [x] Title Bar
  • [ ] Button
  • [ ] TextInput

Screenshots

OS X El Capitan

Windows 10

Usage

Simple usage:

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

react-desktop 暂时没有中文说明

我们期待您参与进来翻译和完善

该操作会锁定该库2天以防止其它用户重复翻译,然后会自动释放

讨论区