Switch Component

Overview​

The switch component is a two-state toggle that allows users to select between two options. It is commonly used in selecting on/off for things like sound, Bluetooth, WiFi, etc.

Properties

Switch

Property	Value	Description
Value	True/False	Initial value of switch
Tint Color	Color	Color of background when switch is false
On Tint Color	Color	Color of background when switch is true
Thumb Tint Color	Color	Color of the switch's slider
Disabled	True/False	Toggle whether value switch can be changed by user

Layout

Property	Value	Desciption
X	coordinate value	Position of the upper left corner of the switch on the X-axis, where the left side of the screen is X=0.
Y	coordinate value	Position of the upper left corner of the switch on the Y-axis, where the top of the screen is Y=0.
Height	number in pixels	The switch's height is defined by a custom number of pixels.
Width	number in pixels	The switch's width is defined by a custom number of pixels.
Resize Mode	Stretch	Stretches the switch to fit the dimensions of the device's screen.
Resize Mode	Float in Place	Renders the switch in the same aspect ratio as the design, regardless of the device size.

Switch Blocks

To access the blocks specific to the switch component:

1. On the Design tab, add a Switch component to a screen.

2. Navigate to the Blocks tab.

3. In the component tree on the left, click the name of the switch component.

4. A drawer of switch-specific blocks opens.

Event Blocks

When Switch On Value Change

This event fires every time the switch is clicked.

Outputs

• newValue - returns the new value of the switch (true or false) each time the switch is clicked.

Properties Blocks

There are two types of property blocks: dark green "set" and light green "get" blocks. The specific blocks available vary according to the UI component.

The dark green set blocks allow you to change the component's properties using blocks. For example, if you don't want a group component to be enabled for a user until they've typed a set number of characters into a text input component, you can use the group's dark green set group's disabled status block.

The light green get blocks allow you to access the properties of a component (e.g. color, font, width, text, etc.).