proton-native/docs/component_APIs/area_rectangle.md
Niklas Mischkulnig 7bb6fa589f Area (#78)
* Area

* Update, percentages as values, transforms!

* Rename Area elements, Circle, CSS colors

* Transform: matrix, skew

* Add Path

* Add fill & stroke options, fix transforms

* Inheriting props

* Fix area events, start on documentation

* Complete documentation

* Properly apply transforms, complete sidebar

* Use dot for Area components, fix Circle

* Add held buttons for onMouseMove

* Fix transform=scale for now

* Fill mode for Area.Path

* Fixes for windows

* Complete area_props list

* Throw on unimplement path commands

* More sophisticated path example

* Cleanup

* More helpful error message
2018-05-02 19:05:27 -04:00

1.4 KiB

Area.Rectangle

A rectangle to be displayed in an Area component.

import React, { Component } from 'react';

import { render, Window, App, Area } from 'proton-native';

class Example extends Component {
  render() {
    return (
      <App>
        <Window title="Example" size={{ w: 500, h: 500 }}>
          <Area>
            <Area.Rectangle
              x="10"
              y="10"
              width="100"
              height="200"
              fill="blue"
            />
          </Area>
        </Window>
      </App>
    );
  }
}

render(<Example />);

Props

Reference

x

The x coordinate of the rectangles top left corner.

Type Required
number | string (number) true

y

The y coordinate of the rectangles top left corner.

Type Required
number | string (number) true

width

The width of the rectangle.

Type Required
number | string (number) true

height

The height of the rectangle.

Type Required
number | string (number) true