Links

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.

Blocks

To access the blocks specific to the switch component:
  1. 1.
    On the Design tab, add a Image component to a screen.
  2. 2.
    Navigate to the Blocks tab.
  3. 3.
    In the component tree on the left, click the name of the image component.
  4. 4.
    A drawer of image-specific blocks opens.
Block Image
Description
This event will fire when the user clicks on the image.
Set the image component's Picture.
Get the image component's Picture.
Set the image component's resize mode
Get the image component's resize mode
Set the image component's height.
Get the image component's height.
Returns the height of the image component in pixels after it has been rendered on-screen.
Set the image component's width.
Get the image component's width.
Returns the width of the image component in pixels after it has been rendered on-screen
Set whether the image component is visible on the screen.
Get whether the image component is visible on the screen.
Set the position image the upper left corner of the image on the X-axis, where the left side of the screen is X=0.
Get the position of the upper left corner of the image on the X-axis, where the left side of the screen is X=0.
Set the position of the upper left corner of the image on the Y-axis, where the top of the screen is Y=0.
Get the position of the upper left corner of the image on the Y-axis, where the top of the screen is Y=0.

Events

On Value Change

This event fires every time the switch is clicked.
Returns newValue output block, which returns the new value of the Switch (true or false).

Properties

Use these blocks to set and get the named properties of the Switch.

Value

Tint Color

On Tint Color

Thumb Tint Color

Disabled

X

Y

Height

Width

Visible