Layout
All components are extrinsically sized, that is they have a property called position that can be set to define where the component is drawn. This position specifies a bounding box for the component to draw in. How the component fills the bounding box depends on the used component.
Some components are intrinsically sized, that is they have a width and height attribute.
A component that can contain other components is called a container and has a property layout. The layout property specifies which algorithm is used to layout the components in the container.
Guiml comes with a few predefined layout algorithms that can be combined to create a wide variety of layouts. If that is not sufficient for your needs you can write your own layout algorithm.
StackLayout
- class guimlcomponents.base.layout.StackLayout(component)
Stack intrinsically sized components within the containing component.
This layout can be used by setting the property layout to
stack.- class Properties
Properties that can be set on the component that uses this layout.
- Properties.direction: Literal['vertical', 'horizontal'] = 'vertical'
The main direction to stack components.
- class ChildProperties
Properties that can be set on childs of the component that uses this layout.
- ChildProperties.gravity: Literal['center', 'stretch', 'left', 'right', 'top', 'bottom'] = 'center'
Gravity controls how the elements behave along the direction orthogonal to the main direction. The gravity of stacked elements is either left or right for vertical stacking and top or bottom for horizontal stacking. Center and stretch can be used for both vertical and horizontal stacking.
- ChildProperties.stretch: int = 0
If stretch is set to a value greater 0 then the component will fill free space along the main direction. If multiple components have stretch set then the fraction of free space they take will be its stretch divided by the sum of all stretch values.
AlignLayout
- class guimlcomponents.base.layout.AlignLayout(component)
Align intrinsically sized component relative to the containing component.
This layout can be used by setting the property layout to
align.- class ChildProperties
Properties that can be set on childs of the component that uses this layout.
- ChildProperties.alignment: Literal['top left', 'top', 'top right', 'left', 'center', 'right', 'bottom left', 'bottom', 'bottom right'] = 'center'
- ChildProperties.stretch: Literal['horizontal', 'vertical', ''] = ''