Introduction
The Rect component is the most fundamental building block in BRICKS.
It appears as a basic rectangle on the canvas and is commonly used as a background color block for layout division. It can also serve as a button, menu, separator, or many other purposes.
A Rect component can be displayed in different styles, such as with or without borders, rounded corners, varying opacity levels, or as dividing lines.
This document explains all parameters of the Rect component in detail. These serve as a reference for setting attributes in other components as well.
The following sections cover attribute variables by category: Frame, Properties, Animations, Events.
Frame Block
Basic attributes and entry transitions for the Rect component.
Property Name | Property Type | Description |
X | Number
Number | X coordinate of the top left corner of the brick Distance from the left boundary of the application to the left edge of the brick. |
Y | Number
Number | Y coordinate of the top left corner of the brick Distance from the top boundary of the application to the top edge of the brick. |
Width | Number
Number | Width of the rectangle brick The width of the Rect brick. |
Height | Number
Number | Height of the rectangle brick The height of the Rect brick. |
Standby Mode | List List | Setting the standby mode of a brick means setting the transition effect from the brick's standby mode to its first appearance on the canvas. There are five standby modes:
Defines the transition effect from standby mode to its first appearance on the canvas. |
Standby Frame | Properties Properties | The Standby Frame property will only show up on the configuration editor and be editable when the user selects "custom" for the brick's Standby Mode. The brick's transitioning properties: x, y, width, and height can be customized. Available only when Standby Mode = custom. Lets you configure entry position and size (x, y, width, height). |
Standby Opacity | Number (between 0 and 1)
Number (0–1) | The opacity of the brick when it is in standby mode. The opacity of the brick during standby mode. |
Standby Delay | ms ms | The time (in milliseconds) for the brick to show up on the screen from standby mode. The delay time (milliseconds) before the brick enters the screen from standby mode. |
Standby Easing | Properties Properties | The brick's transition effect into the screen can be specified with easing functions in the Standby Easing pop-up window. If none of the x, y, width, height, and opacity properties is specified, the brick will use the easing function specified in default. For more in-depth information, visit https://easings.net/ Defines easing functions for entry transitions. If no properties (x, y, width, height, opacity) are specified, the default easing applies. Seehttps://easings.net/ for details. |
Render Out of View | Boolean Boolean (Yes/No) | To specify whether the brick will be rendered even if it is out of the application canvas. For example, if a brick is not on the canvas initially during standby, selecting No means that its effect (such as animation and multimedia content) will not be rendered. Note that this only applies to a brick that is completely out of the canvas, which means the brick will still be rendered if it is located on the edge of the canvas. Whether the brick should be rendered if it is located outside the canvas. |
Properties Block
Property Name | Property Type | Description |
Opacity | Number (between 0 and 1) Number (0–1) | The opacity of the brick. 0: completely transparent; 1: not transparent at all The opacity of the brick. |
Background Color | String String | The background color of the brick. Users can select a color from the color panel or specify the color with HEX, RGBA, or HSLA. Background color of the brick. Users can select via color panel or specify in HEX, RGBA, or HSLA formats. |
Properties – Border Block
Defines the border radius, color, and thickness of the Rect brick.
Property Name | Property Type | Description |
Width | Number Number | The border's width Border width. |
Style | One Of One Of | The border's style. Can be one of solid, dotted, or dashed. solid: Set as a solid border. dotted: Set as a dotted border. dashed: Set as a dashed border.
 |
Color | String String | The border's color Set the border color. |
Radius | Number Number | The border's radius Set the corner radius of the brick. For example, if the brick has a width and height of 10 and you set the radius to 5, the square will turn into a circle. |
Top Width | Number Number | The top border's width. Will overwrite the value specified in border width. Individually set the top border width. This overrides the global Border Width setting. |
Top Color | String String | The top border's color. Will overwrite the value specified in border color. Individually set the top border color. This overrides the global Border Color setting. |
Top Left Radius | Number Number | The border's radius on the top left corner. Will overwrite the value specified in border radius. Individually set the top-left corner radius. This overrides the global Border Radius setting. |
Top Right Radius | Number Number | The border's radius on the top right corner. Will overwrite the value specified in border radius. Individually set the top-right corner radius. This overrides the global Border Radius setting. |
Bottom Width | Number Number | The bottom border's width. Will overwrite the value specified in border width. Individually set the bottom border width. This overrides the global Border Width setting. |
Bottom Color | String String | The bottom border's color. Will overwrite the value specified in border color. Individually set the bottom border color. This overrides the global Border Color setting. |
Bottom Left Radius | Number Number | The border's radius on the bottom left corner. Will overwrite the value specified in border radius. Individually set the bottom-left corner radius. This overrides the global Border Radius setting. |
Bottom Right Radius | Number Number | The border's radius on the bottom right corner. Will overwrite the value specified in border radius. Individually set the bottom-right corner radius. This overrides the global Border Radius setting. |
Left Width | Number Number | The left border's width. Will overwrite the value specified in border width. Individually set the left border width. This overrides the global Border Width setting. |
Left Color | String String | The left border's color. Will overwrite the value specified in border color. Individually set the left border color. This overrides the global Border Color setting. |
Right Width | Number Number | The right border's width. Will overwrite the value specified in border width. Individually set the right border width. This overrides the global Border Width setting. |
Right Color | String String | The right border's color. Will overwrite the value specified in border color.
|
Animations Block
Animations can be configured after creating an animation block and linking it with trigger events. See the Animation Tutorial for examples.
On Press | Animation that will be triggered when the brick is being pressed. Triggered when the Rect is pressed. |
On Focus | Animation that will be triggered when the brick is being focused/selected when using the TV controller. Triggered when the Rect is selected (TV controller). |
On Blur | Animation that will be triggered when the brick is being unfocused/unselected when using the TV controller. Triggered when the Rect loses focus (TV controller). |
Standby | Animation that will be triggered when the brick's standby transition is finished. Triggered when the Rect finishes its standby transition. |
Show | Animation that will be triggered when the brick is shown. Triggered when the Rect is displayed. |
Breathe | Animation that will be triggered on repeat when all other animations finish playing. Note that the animation will only be playing on repeat when the starting point and the ending point are the same. For example, a sequential animation that involves translating X to 30 and then back to 0 (the original position) will work. Triggered repeatedly in a breathing loop after all other animations finish. Requires start and end values to be the same (e.g., rotate 0° → 90° → 0°). |
Events Block
Events define actions triggered under specific conditions. Rect events can be used to switch canvases, activate generators, update Property Bank variables, or dynamically create components/animations. See the Event Tutorial for examples.
On Press | Event that will be triggered when the brick is being pressed. Triggered when the Rect is pressed. |
On Focus | Event that will be triggered when the brick is being focused/selected when using the TV controller. Triggered when the Rect is selected (TV controller). |
On Blur | Event that will be triggered when the brick is being unfocused/unselected when using the TV controller. Triggered when the Rect loses focus (TV controller). |
Show Start | Event that will be triggered when the brick is shown. Triggered when the Rect is displayed. |
Standby | Event that will be triggered when the brick's standby transition is finished. Triggered when the Rect finishes its standby transition. |