Layout Group Component
This component groups a set of other components, just like the basic Group component. A Layout Group, however, is able to resize itself to accommodate the different sizes of a component’s content, particularly when controlled by a dashboard feed list; for example, text from a blog post.
Using the Layout Group Component
Images, text and HTML articles are the main components which vary in size and benefit from being in a Layout Group.
Set the Resize to content property on each of the components which can vary in size. This will cause them to expand to fit their contents, push down the components underneath to make space, and ultimately increase the size of the layout group.
Note: If a text or image is empty (for example, an image filename coming from a feed list is blank) then this will cause the component to shrink down to nothing.
If you don’t want a component to move when components above it increase in size, then set the Position and Size: Normal layout option on the component. This property is only available when the component is inside a layout group.
Properties for Layout Group Component
|Name||When components are placed on a page they appear highlighted blue in the scene tree and can be renamed by double clicking in this panel and typing the new name. Components can also be set to be visible/invisible on the page, using the ‘eye’ icon on this panel.|
|Position and Size||Sets position and size. As long as measurements are maintained as percentages it deals automatically with dynamic layout and resizing for different devices and orientations. You can use millimeters to control aspects of size like width or height in order to create a group that will be well positioned across devices.|
|Clipping Type||Dropdown – options None, Rectangle, Circle. Whichever option is selected will clip whatever is added to the group to the bounds of that shape within the Layout Group Component’s framework.|
|Opacity||Set how opaque the layout group will display on a scale of 0 to 100, with 0 being totally transparent.|
|Resize Rule||Controls how the layout group sizes itself.