Group UI Node

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

ComponentDescription

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.

Last updated