Because this library is being currently built for Electron and NW.js, the examples and demos on this site will only work properly in Chrome.
View
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. |
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" |
layout | string | Sets the direction of the content. Property value "horizontal", "vertical" |
margin | string | Sets the outer margin of a component. E.G. "30px 20px" |
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 { View, Text } from 'react-desktop/windows';
export default class extends Component {
static defaultProps = {
color: '#cc7f29',
theme: 'light'
};
render() {
return (
<View
color={this.props.color}
background
padding="20px"
horizontalAlignment="center"
verticalAlignment="center"
width="200px"
height="100px"
>
<Text color={this.props.theme === 'dark' ? 'white' : '#333'}>Hello World</Text>
</View>
);
}
}