Box Layouts

Box Layouts#

Box layouts display multiple child elements in either a row ('horizontal') or a column ('vertical').

Boxes will automatically resize to contain all child elements if possible.

A new box can be created with the box() function in the eg-overlay-ui module.

Child Alignment#

Each child added to a box must have an alignment value set. This alignment affects how the child is positioned within the box relative to the box and other children.

Important

Alignment is perpendicular to the orientation of the box. A vertical box will use alignment to horizontally position children.

The following values are valid alignments:

Value

Description

start

Top or Left

middle

Center

end

Bottom or Right

fill

Fill the available area. Some elements will be drawn the same as start

Alignment in a vertical box:

+------------------------------+
| [start]                      |
|           [middle]           |
|                        [end] |
| [           fill           ] |
+------------------------------+

Alignment in a horizontal box:

+-------------------------------+
| [start]                [      |
|         [middle]        fill  |
|                  [end]      ] |
+-------------------------------+

Functions#

eg-overlay-ui.box(orientation)#

Create a new box layout container.

Box layout containers arrange their child elements sequentially in either a vertical or horizontal fashion.

Parameters:

orientation (string) – The layout orientation. Either 'vertical' or 'horizontal'.

Returns:

A new uibox.

Version History

Version

Notes

0.3.0

Added

Classes#

class eg-overlay-ui.uibox#

A box layout container.

Box layout containers arrange their child elements sequentially in either a vertical or horizontal fashion.

pushfront(element, alignment, expand)#

Add an element to the top/left of this box.

Parameters:

  • element (uielement) – Child element

  • alignment (string) – One of: 'start', 'middle', 'end', or 'fill'

  • expand (boolean) – Sets if the element should use extra available space

Version History

Version

Notes

0.3.0

Added
pushback(element, alignment, expand)#

Add an element to the bottom/right of this box.

Parameters:

  • element (uielement) – Child element

  • alignment (string) – One of: 'start', 'middle', 'end', or 'fill'

  • expand (boolean) – Sets if the element should use extra available space

Version History

Version

Notes

0.3.0

Added
insertbefore(before, element, alignment, expand)#

Insert element before before.

If before is not in this box, element will not be added and this method will return false. true is returned on success.

Parameters:

  • before (uielement)

  • element (uielement)

  • alignment (string) – One of: 'start', 'middle', 'end', or 'fill'

  • expand (boolean) – Sets if the element should use extra available space

Version History

Version

Notes

0.3.0

Added
insertafter(after, element, alignment, expand)#

Insert element after after.

If after is not in this box, element will not be added and this method will return false. true is returned on success.

Parameters:

  • after (uielement)

  • element (uielement)

  • alignment (string) – One of: 'start', 'middle', 'end', or 'fill'

  • expand (boolean) – Sets if the element should use extra available space

Version History

Version

Notes

0.3.0

Added
popfront()#

Remove the first element of this box.

Version History

Version

Notes

0.3.0

Added
popback()#

Remove the last element of this box.

Version History

Version

Notes

0.3.0

Added
removeitem(element)#

Remove the given element from this box.

Parameters:

element (uielement)

Version History

Version

Notes

0.3.0

Added
len()#

Returns the number of items in this box.

Note

This is also called when using the Lua length operator on the box (#).

Return type:

integer

Version History

Version

Notes

0.3.0

Added
paddingleft(padding)#

Set the amount of space between the left side of the box and the first element, in pixels.

Parameters:

padding (integer)

Version History

Version

Notes

0.3.0

Added
paddingright(padding)#

Set the amount of space between the right side of the box and the last element, in pixels.

Parameters:

padding (integer)

Version History

Version

Notes

0.3.0

Added
paddingtop(padding)#

Set the amount of space between the top side of the box and the first element, in pixels.

Parameters:

padding (integer)

Version History

Version

Notes

0.3.0

Added
paddingbottom(padding)#

Set the amount of space between the bottom side of the box and the last element, in pixels.

Parameters:

padding (integer)

Version History

Version

Notes

0.3.0

Added
spacing(amount)#

Set the amount of space between elements in this box, in pixels.

Parameters:

amount (integer)

Version History

Version

Notes

0.3.0

Added
alignment(align)#

Version History

Version

Notes

0.3.0

Added

Note

The following methods are inherited from uielement

x([position])#

Set or get the current position X.

Parameters:

position (integer) – (Optional)

Return type:

integer

Important

It is normally not necessary to manually position an element.

Version History

Version

Notes

0.3.0

Added
y([position])#

Set or get the current position Y.

Parameters:

position (integer) – (Optional)

Return type:

integer

Important

It is normally not necessary to manually position an element.

Version History

Version

Notes

0.3.0

Added
width([value])#

Get or set the element’s width.

Parameters:

width (integer) – (Optional)

Return type:

integer

Important

It is normally not necessary to manually set an element’s size.

Version History

Version

Notes

0.3.0

Added
height([value])#

Get or set the element’s height.

Parameters:

width (integer) – (Optional)

Return type:

integer

Important

It is normally not necessary to manually set an element’s size.

Version History

Version

Notes

0.3.0

Added
bgcolor([color])#

Get or set the element’s background color.

Parameters:

color (integer) – (Optional)

Return type:

integer

Version History

Version

Notes

0.3.0

Added
Contents