Layout System

The center of kiui is its layout system.

The modern approach chosen for kiui is that everything must layout automatically from the start, without any work from the user. Position and size is no longer a property the user must specify. When the user needs to, though, position and size can be set manually.

This involves two automatisms : sizing, and positioning of the widgets.

• Every widget in kiui is sized automatically : a text button will wrap around its text content, an image button around the image.
• Every widget in kiui layouts its children automatically : the widgets are laid out in sequence along the widget axis, and it is itself sized depending on its content.

Each widget has a few core parameters :

• a layout direction (X or Y)
• a sizing property (shrink, expand, wrap, or manual) for each direction (X, Y)

And some optional or secondary parameters :

• padding for each direction (X, Y)
• spacing for each direction (X, Y)
• alignement for each direction (X, Y)

The layouts works by shrinking the leaf elements to the size of their contents (image or text) if they are set to 'shrink', and then expanding everything else. Position them with padding and spacing and alignment and voila.

A table is just rows, with many 'expand' elements in a row, each with a weight to set how much it expands relative to the others.

The properties above are defined by the style of the widget.

So if you want to tweak the layout, you have to set the properties on the style of your element (which by default is equivalent to it's class) either in code or through a Style Sheet.