Rectangle UI Node
Implement and customize rectangle UI nodes in Blup to enhance your app's design and functionality.
Last updated
Implement and customize rectangle UI nodes in Blup to enhance your app's design and functionality.
Last updated
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.
If you have any ideas to make Blup better you can share them through our Discord community channel
| 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.
