Rectangle
Check out the standard help for an overview of the Rectangle Component.
API Examples
// Internally the component is known as "rectangle"
var rectangleComponent1 = findComponent("My Page", "rectangle", "MyRectangle"); // To retrieve a rectangle component called "Myrectangle" on a page called "My Page"
var rectangleComponent2 = findComponentInForeground("My Foreground", "rectangle", "MyRectangle"); // To retrieve a rectangle component in the foreground.
var rectangleComponent3 = createComponent(parentComponent, "rectangle", 0, 0, 100, 100); // to create a rectangle component inside a custom component.
// Retrieving a property
var colorOfRectangle = getProperty(rectangleComponent1, "fill_color");
console.log(colorOfRectangle);
// Setting a property
setProperty(rectangleComponent1, "fill_color", "0xFFFFFFFF");
setProperty(rectangleComponent1, "corner_radius", 5);
// Binding an event
bindEvent(rectangleComponent3, "on_press", "action");
function action(){
console.log("hello world");
}Properties
See the shared property list for all properties available for this component.
| Property | Type | Description |
|---|---|---|
| fill_color | string (0x000000 – 0xFFFFFFFF) | The color to fill |
| stroke_color | string (0x000000 – 0xFFFFFFFF) | The color of the border |
| gradient_top_color | string (0x000000 – 0xFFFFFFFF) | Linear Gradient – Top to Bottom |
| gradient_bottom_color | string (0x000000 – 0xFFFFFFFF) | Linear Gradient – Top to Bottom |
| stroke_width | number (> 0) | The width of the border |
| corner_radius | number (> 0) | The radius of the corners |
| stroke_position | number | 0 – middle (default) 1 – inside 2 – outside |
| stroke_top, stroke_bottom, stroke_left, stroke_right | bool | Default is true |
Events
See the shared event list for all events available for this component.