mirror of
https://github.com/kusti8/proton-native.git
synced 2026-05-25 06:12:24 -06:00
* 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
1.4 KiB
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
- (#x)
- y
- width
- height
- (All props listed in Area 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 |