Tutorial EzLang Layout Modes Stack

Stack mode stacks widgets inside of the layout according to the primary and secondary orientation. This can be useful if you want a bunch of widgets to fit into a layout efficiently (especially useful if the widgets are many different sizes). Unlike box mode which can either be horizontal or vertical, stack mode has 8 possible orientations. The default orientation is "top-bottom, left-right". This means that objects will be placed from top to bottom until there is no more vertical space to place the next widget. The next widget will then be placed at the top again, to the right of the first widget. In short: widgets are placed in the primary direction until space runs out; then they will be shifted towards the secondary direction. The possible orientations are:

• Top-bottom, left-right ('tb-lr')
• Top-bottom, right-left ('tb-rl')
• Bottom-top, left-right ('bt-lr')
• Bottom-top, right-left ('bt-rl')
• Left-right, top-bottom ('lr-tb')
• Left-right, bottom-top ('lr-bt')
• Right-left, top-bottom ('rl-tb')
• Right-left, bottom-top ('rl-bt')

Here is an example: we have labels of different sizes and we want to place them efficiently in a layout, trying not to waste space. Instead of coming up with a complex solution, we just let the stack layout do the work for us. We want the widgets stacked left-to-right, top-to-bottom:

- <CustomLabel@Label>:
    auto_scale: true, true
    border: true

- Layout:
    mode: stack
    orientation: lr-tb
    border: true
    - CustomLabel:
        text: Hi,
    - CustomLabel:
        text: The size
    - CustomLabel:
        text: Of these labels
    - CustomLabel:
        text: Keeps increasing in length!

The widgets will be stacked automatically. If you resize the window, the row and column each widget occupies may change, as the stack layout rearranges the widgets, but the orientation will always be respected.

As you can see, stack layouts are an easy way to make sure your widgets will remain visible even when the window resizes (as long as there is enough space in general of course).

Continue

The general tutorial continues with: EzLang Table mode layouts.