Skip to content

window.md

Latest commit

 

History

History
46 lines (40 loc) · 1.76 KB

window.md

File metadata and controls

46 lines (40 loc) · 1.76 KB
Raw

Window

Properties

Property Type Description
background string, bool Sets the background color of a component, if bool, the color will be used as the background color.
chrome bool Sets the chrome of the window.
color string Sets the main color of a component and it's children.
height number Sets the height of a component.
hidden bool Sets the visibility of a component.
horizontalAlignment string Sets the horizontal alignment of the component's content
Property value "left", "center", "right"
padding string Sets the padding inside a component.
E.G. "30px 20px"
theme string Sets the UI theme that is used by this component and its children elements.
Property value "light", "dark"
verticalAlignment string Sets the vertical alignment of the component's content.
Property value "top", "center", "bottom"
width number Sets the width of a component.

Examples

import React, { Component } from 'react';
import { Window, TitleBar, Text } from 'react-desktop/windows';

export default class extends Component {
  static defaultProps = {
    color: '#cc7f29',
    theme: 'dark'
  };

  render() {
    return (
      <Window
        color={this.props.color}
        theme={this.props.theme}
        chrome
        width="1000px"
        height="600px"
        padding="12px"
      >
        <TitleBar title="My Windows Application" controls/>
        <Text color={this.props.theme === 'dark' ? 'white' : '#333'}>Hello World</Text>
      </Window>
    );
  }
}