Bottom-Up Stack
Last updated
Last updated
Bottom-up stacks can be used to display stacks of elements which should move up as more are added. This concept is similar to messages received in a chat window. Gum layout can be used to produce this type of stack.
A bottom-up stack will be a container, which could be an instance of a container or a component since components ultimately are containers. For this example we'll use a container.
For this container to stack we'll set the following variables:
Children Layout set to Top to Bottom Stack so all children stack vertically
Height Units set to Relative to Children so the container resizes itself as more children are added
Height set to 0 so the height of the container is based purely on its children
Stack Spacing set to 2 (optional) to add spacing between each child
Now the container can have children added. Any type of child will stack. For this tutorial we'll use ColoredRectangle instances. Add a few instances to the Container and they stack vertically.
Finally we can have the stack grow up instead of down. To do this, change the following variables on the parent container:
Y Origin set to Bottom
Y Units set to Pixels from Bottom
Now as new children are added, the parent stack grows and all items shift up.
