Container Components

When creating components, it’s sometimes useful to influence where child elements are placed when used. For example, a component that draws a label above an element inside:

export component MyApp inherits Window {

    BoxWithLabel {
        Text {
            // ...
        }
    }

    // ...
}

You can implement such a BoxWithLabel using a layout. By default child elements like the Text element become direct children of the BoxWithLabel, but for this example they need to become children of the layout instead. To do this can change the default child placement by using the @children expression inside the element hierarchy of a component:

component BoxWithLabel inherits GridLayout {
    Row {
        Text { text: "label text here"; }
    }
    Row {
        @children
    }
}

export component MyApp inherits Window {
    preferred-height: 100px;
    BoxWithLabel {
        Rectangle { background: blue; }
        Rectangle { background: yellow; }
    }
}