Tutorial EzLang Layout Modes Box

In Box mode objects are placed from left to right (orientation: horizontal) or top to bottom (orientation: vertical). This is the simplest layout mode and is useful in many scenarios. An example of a vertical box mode layout could be a menu (a set of buttons placed under one another):

- <CustomButton@Button>:
    fg_color: yellow
    bg_color: blue
    auto_scale: true, true

- Layout:
    mode: box
    orientation: vertical
    - CustomButton:
        text: Option 1
    - CustomButton:
        text: Option 2
    - CustomButton:
        text: Option 3

It can often be useful to nest Box layouts in other Box layouts to divide the screen into rectangles. Let's say for example we want two menus, one on the left side of the screen and one on the right. We could divide the screen horizontally with a Box layout, and then add two vertical Box layouts (one menu for each side of the screen):

- <CustomButton@Button>:
    fg_color: yellow
    bg_color: blue
    auto_scale: true, true

- Layout:
    mode: box
    orientation: horizontal
    - Layout:
        mode: box
        orientation: vertical
        border: true
        - CustomButton:
            text: Left option 1
        - CustomButton:
            text: Left option 2
        - CustomButton:
            text: Left option 3
    - Layout:
        mode: box
        orientation: vertical
        border: true
        - CustomButton:
            text: Right option 1
        - CustomButton:
            text: Right option 2
        - CustomButton:
            text: Right option 3

Continue

The general tutorial continues with: EzLang Stack mode layouts.