This node facilitates interaction with UI rectangles, allowing dynamic modification of associated properties. It also captures events like on-click or property changes.
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.
Step 1: Select an ungrouped rectangle on the mobile canvas or pages.
Step 2: Right-click the selected rectangle to open the arsenal panel in Blup Designer.
Step 3: In the arsenal panel (which differs for Blup Logics), choose "Add Logics."
Step 4: This action generates a rectangle node in Blup Logics respective tab.
| Component | Description |
|---|---|
| Child | This input node receives the parent widget of the container. |
| On Click | This node allows you to trigger actions when the rectangle is clicked. |
| Rect Properties | This node provides properties for the rectangle such as width, height,file path and many more. |
| Rect Extra Properties | This node offers additional options to customize the rectangle, such as padding, corner radius, shadow effects and many more. |
| Width | This input node defines the width of the rectangle. |
| Height | This input node defines the height of the rectangle. |
| Is Visible | 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. |
| Corner Radius | This input node helps to define the corner radius. |
| 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. |
| Radius | This input node helps to define the 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. |
If you have any ideas to make Blup better you can share them through our Discord community channel
{% tab title="Music" %}
{% embed url="https://open.spotify.com/playlist/0vvXsWCC9xrXsKd4FyS8kM?si=2c7f55bd3f944878" %}
Lofi music
{% endembed %}
{% endtab %}
{% endtabs %}