expandExample
@
safe @
()
=> label(.headingTheme, `Shrinking and expanding`),
()
=> label(`You might have noticed something is off in the previous example. Despite the '.layout!"fill"' ` ~ `option, the label did not expand to the end of the container, but only used up a single line. This has to ` ~ `do with "expanding".`),
()
=> label(`By default, nodes operate in "shrink mode," which means they will only take the space they need. ` ~ `The parent node may have spare space to give, which means the node has to decide what part of that space it ` ~ `has to take. This is what happens when you change alignment: A start aligned node will take the top-left ` ~ `corner of that space, while an end aligned node will take the bottom-right corner, but they cannot move ` ~ `within space that hasn't been explicitly assigned to them.`),
()
=> label(`Because the job of frames is to align multiple nodes in a single row or column, frames will give ` ~ `their children space within a column or row according to their need. The nodes are given maximum space on ` ~ `the other axis, however, because it's not shared with any other node.`),
()
=> label(`This is where the 'expand' layout setting is useful. The frame will evenly distribute space among ` ~ `expanding nodes.`),
()
=> highlightBoxTheme Frame
expandExample