Layouts

Parent elements lay out their child elements in one of three ways:

• Paragraphs
• Stacks
• Overlays

These simple stacking rules allow creating quite sophisticated layouts.

pub fn RenderLeaderboardRow(playerName, userId, rating, [color, ui]) {
    ShinyPanel(backgroundColor=color, vPadding=0.4) { // ShinyPanel is a VStack like most other stacking elements
        HStack { // Change to an HStack so we can stack horizontally
            P(fontSize=1.2, bold=true) {
                SubtleLink(ProfilePage(userId)) {
                    %(playerName)
                }
            }
            
            Spacer // Take up all remaining space in between the two elements

            P { // This element appears on the right because of the Spacer
                %(rating.Rating.FormatWithDecimals(0))
                " rating"
            }
        }
    }
}

Paragraphs

Paragraph elements (for example P or Button) lay out each child horizontally one after the other, wrapping to the next line when the line is full.

Stacks

Stacks (for example VStack, HStack or Panel) lay out their children either horizontally or vertically, one after the other.

Paragraphs should be used for text, whereas Stacks should be used for layout.

Most stacking elements (VStack, Panel) will stack vertically, except for HStack and Toolbar which stack horizontally. Place an HStack inside of a VStack or vice versa to change stacking direction.

Making a grid with stacks

Use the wrap=true parameter on an HStack or VStack to create a grid layout. Once a particular row or column is full, it will automatically wrap to the next row or column, creating a grid.

Filling remaining space

The expand=true property can be used to make one or more children grow to take up all remaining space in the stack.

Want to make a sidebar and a main content area that fills the rest of the screen? Put it all in an HStack, give the sidebar a fixed width, e.g. width=20, then give the main content area expand=true.

Overlays

The ZOverlay element can be used to stack an element on top of another. To use this, set zStack=true on a parent element, like a Panel, HStack or VStack. The ZOverlay element will search for its nearest containing zStack=true element and overlay itself on top of that element.