panel

A panel is a container for one or more child elements, and controls how the children are laid out within the panel's available space. Children can be defined in the YUI screen file via the elements property, or elements can be bound to game data and displayed via the template property.

Using elements directly

In this example, elements is set directly in YAML to an array containing one text element and one button element:

type: panel
layout: horizontal
elements:
  - type: text
    text: Hello World
  - type: button
    content: Click Me!
    on_click: @@ do_something()

Using elements and template with data

In this example, elements is bound to the @inventory.items array, and the template then displays a text element for each item in the array, where the text is the @display_name for that item.

type: panel
elements: @inventory.items
template:
  type: text
  text: @display_name

Properties

Required Properties

elements

Core Properties

Property	Type	Default Value?	Bindable?	Description
layout	vertical, horizontal, grid, canvas, or radial	vertical	no	The layout property controls how child elements are positioned within the panel's space. The default is vertical, which will stack elements vertically from top to bottom, and use up only as much space as those elements take up. See Layouts for more information.
elements	An array of values or YUI Content items	-	yes	The elements property can be a binding to an array of values, or an explicit array of child content items.
template	YUI Content	-	no	When using the elements property to bind to game data, the template property allows you to define how that data will be displayed. YUI will render each item in the array from the game data using the YUI element defined by the template, and will set the data context of that element to be the corresponding item from the array. This way you can use bindings in the template value, and those bindings will get their data from the individual item, rather than from the current data context. NOTE: Don't confuse this property with the template element!)

Positioning

Property	Type	Default Value	Bindable?	Description
padding	number or {padding definition}	0	no	padding allows you to define a 'buffer zone' around the contents of the panel. For example, setting padding to 5 will put 5 pixels worth of space around all sides of the content. Padding can also be specified as [<left-right>, <top-bottom>] or [<left>, <top>, <right>, <bottom>]
spacing	number	0	no	Similar to padding, spacing allows you to specify the number of pixels to leave between elements. spacing only applies to vertical and horizontal layout (grid layout uses row_spacing and column_spacing).

Visuals

Property	Type	Default Value?	Bindable?	Description
background	sprite asset name or GMS color name or Color Literal	-	no	Specifies a sprite or color to use as the background of the panel. Supports 9-slicing for sprites, and alpha for colors.
border_color	GMS color name or Color Literal	-	no	Draws an (unfilled) rectangle around the child elements in the specified color. Supports Alpha.
border_thickness	real number	1	no	Defines the thickness (in pixels) of the border rectangle.

Layouts

The Layout Examples section of the Example Project demonstrates the various possible layouts:

Vertical/Horizontal

TODO

Additional Properties

Property	Type	Default Value	Bindable?	Description
alignment	default, stretch, center, or {alignment definition}	default	no	alignment controls how the layout aligns elements within the available space.

Canvas

TODO

Grid

TODO

Radial

TODO