Rectangle UI Node

This node helps to interact with the rectangle created in the UI, this node helps to change various properties associated with the rectangle dynamically. This node is also helpful in capturing various events like on-click or properties changed\updated.
For example, if you wanted to navigate to another page with the click of the rectangle, such types of functionalities can be achieved with the help of this node.
How to get rectangle Node.
To get the rectangle node just select any normal rectangle [not grouped] present on the mobile canvas or pages, then press right-click over the selected rectangle it will open up an arsenal panel in blup designer [arsenal panel is different for blup lightning] in which you can select the option of edit in blup lightning, as soon you click on the option a rectangle node is generated in the blup lightning in the respective tab.
Components of rectangle Nodes.
Width
This input node defines the width of the rectangle.
Height
This input node defines the height of the rectangle.
Is hide
This input node point is used to hide the rectangle, this node point accepts a Boolean type value if the value is true it hides the rectangle, else the rectangle is visible.
File Path
This input node point provides the path of any image or gif to be shown inside the rectangle for mobile applications.
File Bytes
This input node point provides the data in bytes to be shown inside the rectangle for web applications.
Extra Data
This input node points stores data that can be used further along the line.
Edit Checkbox
This checkbox helps you to access secondary input node points or additional properties associated with the rectangle node. If the checkbox is checked, all the secondary input node points are visible, if not they are hidden and cannot be used. 
Padding Left
This node point is used to give left padding. 
Padding Right
This node point is used to give Right padding. 
Padding Top
This node point is used to give Top padding.
Padding Bottom 
This node point is used to give Bottom padding. 
Corner Radius
This input node helps to define the corner radius.
Fill
This node point helps to provide background colour to the rectangle. 
Border fill 
This input node point helps to apply colour to the border of the rectangle. 
Border Width
This input node point is used to define the width of the border of the rectangle.
Shadow Fill
This input node is used to provide colour to the shadow.
Shadow X
 This input node point helps to move the shadow effect along the X-axis [horizontally]. 
Shadow Y
This input box helps to move the shadow effect along the Y-axis[vertically]. 
Shadow blur
This input node point helps you to expand the effect of shadow, If the value is smaller then the shadow is concentrated on a small area and vice versa. 
Inner Shadow
This input node defines the inner shadow of the rectangle.
Image Fill
This input node point helps you provide a background colour to the image present in the rectangle.
Image Fit
This input node point helps to define how the image has to be fitted inside the rectangle.
On Click
This output node point defines the logic to be executed when there is an on-click press on the rectangle. 
On Rect default prop update
This output node point as the name suggests helps you to run any logic when any primary input node points [primary properties ] is changed. Also if you stretch the node point it will give you the properties values that are present on the left-hand side of the rectangle node. 
 On react Extra prop Update
This output node point defines the logic when the secondary properties are available. Similar to the above node point stretch this node point further will help you to get more output node points.

UI Nodes

Group UI Node

Last modified 9mo ago

Width	This input node defines the width of the rectangle.
Height	This input node defines the height of the rectangle.
Is hide	This input node point is used to hide the rectangle, this node point accepts a Boolean type value if the value is true it hides the rectangle, else the rectangle is visible.
File Path	This input node point provides the path of any image or gif to be shown inside the rectangle for mobile applications.
File Bytes	This input node point provides the data in bytes to be shown inside the rectangle for web applications.
Extra Data	This input node points stores data that can be used further along the line.
Edit Checkbox	This checkbox helps you to access secondary input node points or additional properties associated with the rectangle node. If the checkbox is checked, all the secondary input node points are visible, if not they are hidden and cannot be used.
Padding Left	This node point is used to give left padding.
Padding Right	This node point is used to give Right padding.
Padding Top	This node point is used to give Top padding.
Padding Bottom	This node point is used to give Bottom padding.
Corner Radius	This input node helps to define the corner radius.
Fill	This node point helps to provide background colour to the rectangle.
Border fill	This input node point helps to apply colour to the border of the rectangle.
Border Width	This input node point is used to define the width of the border of the rectangle.
Shadow Fill	This input node is used to provide colour to the shadow.
Shadow X	This input node point helps to move the shadow effect along the X-axis [horizontally].
Shadow Y	This input box helps to move the shadow effect along the Y-axis[vertically].
Shadow blur	This input node point helps you to expand the effect of shadow, If the value is smaller then the shadow is concentrated on a small area and vice versa.
Inner Shadow	This input node defines the inner shadow of the rectangle.
Image Fill	This input node point helps you provide a background colour to the image present in the rectangle.
Image Fit	This input node point helps to define how the image has to be fitted inside the rectangle.
On Click	This output node point defines the logic to be executed when there is an on-click press on the rectangle.
On Rect default prop update	This output node point as the name suggests helps you to run any logic when any primary input node points [primary properties ] is changed. Also if you stretch the node point it will give you the properties values that are present on the left-hand side of the rectangle node.
On react Extra prop Update	This output node point defines the logic when the secondary properties are available. Similar to the above node point stretch this node point further will help you to get more output node points.