Grouping and inheritance

Grouping elements

The hierarchy panel shows the hierarchy of all the elements in your UI scene. You can also use it to group UI elements.

Let say for example that we have three elements in the scene - a circle, a rectangle and a text and we want to group them. The first thing that we need to do is to decide which will be the parent element. Let say for this example it will be the rectangle element. Then we just need to drag and drop the rest of the elements` nodes on it in the hierarchy panel.

The indentation indicates that the text and the circle elements are now child elements to the rectangle (parent). If we now move the rectangle element all three elements will move as a group.

Inheritance

Once you have elements that have parent-child relationship in the hierarchy panel you can take advantage of another important feature - inheritance of styles.

If you set a specific style for the parent and you have the same style for child set as "inherit" then the style of the parent will be applied to the child as well.

If we take the sample case from the Grouping elements section and set for example the font style of the rectangle (parent) to italic.

and then have the font style of the text element (child) set to inherit

And the text element will have italic font style applied to it.

This feature is very powerful since you can have many child elements that share the same styles inherited from the parent element.

Visibility

You can change the visibility of the objects in the editor by clinking on the "eye" icon next to the element.

Locking objects

You can lock objects so that they cannot be moved in the editor by clinking on the "lock" icon next to the element.