Layout Elements
ELEMENTS uses a Flex Box based layout system, just like UI Toolkit. This is made easily accessible using layout elements called Groups.
There are two main types of group: VerticalGroup, and HorizontalGroup. As the names suggest, these elements render their children either vertically or horizontally. You can also easily control the alignment of the children within these groups.
Examples
To create a VerticalGroup...
return new VerticalGroup(
child,
child
child
)To create a HorizontalGroup...
return new HorizontalGroup(
child,
child,
child
)Alignment and justification
Typically alignment and justification on a group are controlled using USS, however ELEMENTS provides handy convenience methods to easily adjust this.
return new HorizontalGroup(
child,
child,
child
).AlignItems(Align.Center).JustifyContent(Justify.SpaceBetween)Child pseudo-classes
ELEMENTS automatically applies pseudo-classes to children of any Group. These classes are applied when BuildVisualElement() is called and can be targeted in your USS stylesheets for positional styling.
| Class | Applied to |
|---|---|
.first-child | The first child element |
.last-child | The last child element |
.even-child | Children at even indices (0, 2, 4...) |
.odd-child | Children at odd indices (1, 3, 5...) |
You can target these in your USS stylesheets:
/* Zebra-stripe rows */
.my-list > .even-child {
background-color: #f8fafc;
}
.my-list > .odd-child {
background-color: #ffffff;
}
/* Remove bottom border on last item */
.my-list > .last-child {
border-bottom-width: 0;
}These pseudo-classes are also used internally by the built-in gap utility classes — .first-child resets the margin to zero so the first item has no leading space.