Tutorial EzLang Layout Modes Float

In float mode, widgets can be placed freely anywhere in the layout. This mode does not have any orientations. Placing widgets can be done using hardcoded positions, or using position hints. Positions hints are suggestions for where you want to place your widgets; the framework will then do the work for you. Let's say we want to put a label in each corner of the screen and one label in the middle of the screen, like this:

1   2
  3
4   5

We could most easily accomplish this using a float layout with position hints:

- <FloatLabel@Label>:
    auto_scale: true, true

- Layout:
    mode: float
    - FloatLabel:
        text: 1
        pos_hint: left, top
    - FloatLabel:
        text: 2
        pos_hint: right, top
    - FloatLabel:
        text: 3
        pos_hint: center, middle
    - FloatLabel:
        text: 4
        pos_hint: left, bottom
    - FloatLabel:
        text: 5
        pos_hint: right, bottom

All the positioning is taken care of for us; even if the window resizes these relative positions will be maintained. available The position hints are:

• Horizontal:
  • Left
  • Center
  • Right
• Vertical
  • Top
  • Middle
  • Bottom

You can also specify an offset with positions hints, for example 'right: 0.2' means 20% of the right side of the parent. So if the parent is 10 wide, 'right: 0.2' resolves to the x position '2'. Let's use position hints with offsets to create a label that is slightly off-center:

- Layout:
    mode: float
    - Label:
        text: Hello world
        pos_hint: right: 0.4, bottom: 0.6
        auto_scale: true, true

Float mode also allows you to hardcode positions:

- Layout:
    mode: float
    - Label:
        text: Hello world
        auto_scale: true, true
        pos: 10, 10

There are use cases for hard coded positions, but keep in mind these positions won't change if the terminal is resized. In most cases position hints are the better choice as they will scale with the terminal.

Continue

The general tutorial continues with: EzLang Tab mode layouts.