Vertical Container
Vertical container is a "grouping" mechanism to group one or more elements vertically.
General Properties
General Properties
You should set the positional properties only:
left
top
width and height are set automatically based on the child elements (total).
Adding Element
Adding Element
You add element by defining the +
sign. Example:
#D1
+ image { left = 50 top = 10 width = 60 height = 60 file = "center.png" }
For the element:
- You don't need to set positional properties like left or top. They are not taken into account.
- Maximum width of the children's width is being counted.
- All elements' height are summed up as the total height of the container.
- The element's height remains unchanged.
Example
Example
+ vbox {
left = 50%+310
top = 50%-50
width = 20
height = 100
#D1
+ image { left = 50 top = 10 width = 60 height = 60 file = "center.png" }
#D2
+ image { left = 40 top = 20 width = 70 height = 70 file = "button_n.png" }
}
Notice the generated vertical box has:
- ignored its
width
(20) andheight
(100) and went for max width (70) and total height (130) - no cropping - Each child's
left
andtop
are ignored. - Max width is determined by the biggest width of all children.
- the container height is the sum of all heights from all children.
That's all about vertical containers.