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.
Text
Properties
Property | Type | Description |
---|---|---|
background | string, bool | Sets whether the background is colored (bool) or sets the color of the background (string). |
color | string, bool | Sets whether the text is colored (bool) or sets the color of the text (string). |
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" |
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 { Text } from 'react-desktop/windows';
export default class extends Component {
static defaultProps = {
color: '#cc7f29',
theme: 'light'
};
render() {
return (
<Text
background={this.props.color}
theme={this.props.theme}
width="100%"
horizontalAlignment="center"
verticalAlignment="center"
padding="100px"
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam justo urna, posuere vitae est et, accumsan
bibendum sapien. Suspendisse lobortis mollis finibus. Nunc tincidunt enim est, efficitur semper dolor luctus
eget. Donec faucibus dolor id leo tincidunt, condimentum mattis augue finibus. Etiam hendrerit ipsum nisi,
vel semper dolor malesuada a. Pellentesque a scelerisque sapien, quis interdum odio. Nulla posuere, velit sit
amet lacinia pharetra, sapien arcu convallis dolor, id congue erat lectus nec sem. Praesent pretium a nisi et
elementum. Cras lacinia sollicitudin suscipit. Phasellus accumsan felis odio. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.
</Text>
);
}
}