Bottom-Up Stack

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.

Items in a bottom-up stack need a parent Container. This Container could be an instance of a Container or a component since components usually have their Base Type set to Container. For this example we'll use a container.

This container to stack needs the following variables set:

• 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 effective height of the container is based purely on its children

  
• Stack Spacing set to 2 (optional) to add spacing between each child

  

Now children of the Container stack vertically. This concept works for any type of child, but we'll use ColoredRectangles for this example. 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.