Group UI Node
Organize and manage grouped UI nodes in Blup for better design efficiency and functionality.
Last updated
Organize and manage grouped UI nodes in Blup for better design efficiency and functionality.
Last updated
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.
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.
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 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.
