Groups
This section covers Groups, that can be used to contain elements and data and control the responsive behavior of child elements
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.
Using groups for navigation
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.
Using conditions
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.
Using actions
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.
Other ways to learn
Last updated
