Group UI Node

Organize and manage grouped UI nodes in Blup for better design efficiency and functionality.

The Group node is useful when you want to perform any logic or change the property of the group dynamically on some event.

This node provides you with all properties that can be changed in a group.

How to get the Group Node.

To get the group node first group the multiple elements present on the page or mobile canvas together and then select the group created with the selector toggle, then right-click on the group, arsenal panel of blup designer opens up, select the edit in blup lightning option from the dialog box, this will generate the group Node in blup Lightning.

Note: the group node doesn’t have the onclick output node point so if you wanted to perform any logic when the user clicks on the group you have to do it through the rectangle present inside the group.

Components of Group UI Node

Component	Description
Child	This input node receives the parent widget of the container.
On Click	This node allows you to trigger actions when the it is clicked.
Column Properties	This node shows Column properties such as hide, width, height and many more.
Column Extra Properties	This node offers additional options to customize the Group, such as padding, spacing, aspect ratio and many more.
Width	This input node helps to define the width of the group.
Height	This input node helps to define the height of the group.
Is Visible	This input node point helps to hide the group, this node point accepts a Boolean-type value if the value is true it hides the group, else the group is visible.
Extra Data	This input node points help to store data. which can be used in further cases.
Edit Column Properties	This checkbox helps to access secondary input node points or Extra properties associated with the group node. If the checkbox is checked then the secondary input node points are visible ; if not then they are hidden and cannot be used.
S L Padding Left	This node point sets smart layout padding from the left side of the column.
S L Padding Right	This node point sets smart layout padding from the right side of the column.
S L Padding Top	This node point sets smart layout padding from the top side of the column.
S L Padding Bottom	This node point sets smart layout padding from the bottom side of the column.
S L Allignment	This node determines horizontal or vertical alignment according to your needs.
S L Direction	This node gives the direction inside the column.
S L Gap	This node point specifies the direction inside the column.
S L Spacing	This node point sets the gap inside the column.
Padding Left	This node adjusts the padding from the left side of the column.
Padding Right	This node adjusts the padding from the right side of the column.
Padding Top	This node adjusts the padding from the top side of the column.
Padding Bottom	This node adjusts the padding from the bottom side of the column.
Radius	This node adjusts the radius of the column.
Fill	This node help in filling the color to your column.
Border Fill	This node help in filling the color to your column border.
Border Width	This node help in defining your coumn width.
Shadow Fill	This node help in filling the color to your column shadow.
Shadow X	This node adjust the shadow on the x-axis.
Shadow Y	This node adjust the shadow on the y-axis.
Shadow Blur	This node guves the blury shadow to your column group.
Dotted Border	This node gives the dotted border to your column group.
Layer Blur	This node give the blury layer to your group.

If you have any ideas to make Blup better you can share them through our Discord community channel

Music to go with.

Lofi music