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.
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.
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. |
Last modified 9mo ago