Groups
This section covers Groups, that can be used to contain elements and data and control the responsive behavior of child elements
Last updated
This section covers Groups, that can be used to contain elements and data and control the responsive behavior of child elements
Last updated
Groups are the most basic container type. It can be placed anywhere on the page, including inside of another container.
It can be used to organize other elements, for aesthetic purposes (by styling it) and to pass data.
Groups can be displayed and hidden based on different conditions and user actions. By hiding and showing groups that contain other elements you can let your users navigate your app without having to go to another page.
When a group is hidden, you can set it to collapse its height and width to give room for other groups to be displayed. To the user, the switch is instant – the content on the page simply seems to change without any delay or flickering.
In the animation above we are toggling the visibility of Group A and Group B. The result is that one replaces the other as the blue group collapses its height. This is how you build (often abbreviated to SPA) where users can visit different sections of the page while never having to reload.
There are two ways to hide and show groups: conditions and actions.
The first way is to place on the group that looks for specific criteria to be true. A common way to control user navigation is to use conditions together with .
In the condition above we are checking the URL for a parameter called navigation. If the value of the parameter is edit user the element is visible.
The second way to hide and show groups is to use actions. You can choose to instantly show/hide the group by using the Toggle an element action, or you can apply an animation using the Animate an element action.
