Skip to content
Quetzy edited this page Jun 20, 2022 · 2 revisions

[!] Needs Update for 0.3.0 [!]

A switch element allows you to conditionally render different UI based on a data binding. For example, you may want to render one thing if a value in your game data is true, or another if it's false. switch also supports strings, so you might want to switch on something like left/right or top/bottom.

Example

TODO

Required Properties

switch_on and cases

Switch Properties

Property Type Default Value? Bindable? Description
switch_on {binding} to a boolean or string value - yes The switch_on binding determines the value that will be used to decide which 'case' to render from the cases property.
cases string-to-YUI-Element map (struct) - - The cases property is a struct, which maps one of the expected case values to a YUI element. See the cases example below if this sounds confusing.
default_case YUI element - - The default_case property can be used to define a renderer to use when the value from switch_on does not have a matching case in the cases definition.

cases Example

cases is a map, which pairs a 'key', corresponding to the resolved value from switch_on to a YUI element to render when the resolved value matches the case key. For example:

cases:
  top:
    type: text
    text: This will only render if the switch value is 'top'
  bottom:
    type: text
    text: And this will only render if the switch value is 'bottom'

This example is only rendering simple text elements, but any YUI Element (or panel of elements, etc) can be used.