采用React构建的OS X和Windows UI组件：react-desktop

jopen 9年前

采用React构建的OS X和Windows UI组件：react-desktop

Todos OS X

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

Todos Windows

  • Button
  • TextInput
  • TitleBar
  • Toolbar

Screenshots

Usage

Simple usage: 

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

项目主页：http://www.open-open.com/lib/view/home/1444983762607