Switch Component
Last updated
Was this helpful?
Last updated
Was this helpful?
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.
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
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.
To access the blocks specific to the switch component:
On the Design tab, add a Switch component to a screen.
Navigate to the Blocks tab.
In the component tree on the left, click the name of the switch component.
A drawer of switch-specific blocks opens.
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.
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.).
