docs › structure & style › arranging children

arranging children

put more than one thing in a container

this article shows how goo lays out a row of children. you will see a white rounded card with a counter and an orange "+" button side by side, and the button will already work.

the code

create Code/Demos/CounterUI.cs:

using Goo;
using Sandbox.UI;

namespace Sandbox;

public class CounterUI : GooPanel<Container>
{
    private int _count;

    protected override Container Build() => new Container
    {
        Padding = 16,
        Width = 128,
        Height = 128,
        BackgroundColor = Color.White,
        BorderRadius = 12,
        FlexDirection = FlexDirection.Row,
        Gap = 12,
        AlignItems = Align.Center,
        Children =
        {
            new Text(_count.ToString()),
            new Container
            {
                Padding = 8,
                BackgroundColor = Color.Orange,
                HoverBackgroundColor = Color.Cyan,
                BorderRadius = 6,
                OnClick = e => { _count++; Rebuild(); },
                Children = { new Text("+") },
            },
        },
    };
}

drop it on a GameObject the same way you did in your first panel. you should see a white rounded card with a counter and an orange "+" button side by side.

what is new here

three properties do the layout work.

FlexDirection = FlexDirection.Row places children left-to-right. the default is column (top-to-bottom), which is what you get when you omit it. switch to Row and siblings line up horizontally.

Gap = 12 puts 12 pixels of space between each sibling. you do not need margins on individual children.

AlignItems = Align.Center centers children on the cross axis. in a row, the cross axis runs top-to-bottom, so this keeps the number and the button vertically centered with each other.

the second child is a Container that wraps a Text, not just a Text on its own. nesting containers is how non-trivial UIs get built. each Container controls the look and layout of its own region.

HoverBackgroundColor changes the background when the cursor is over the element. it follows the same pattern as BackgroundColor, just for the hover state.

OnClick takes a lambda. the button increments _count and calls Rebuild(), which schedules a fresh Build() on the next tick. see your first counter for a full walkthrough of that pattern.

see also