Switch Component

Properties

backgroundColor
  Specifies the background color of the Switch as an red-green-blue-alpha RRGGBBAA or red-green-blue RRGGBB string.
Data type: color
Designer Writable true <switch name="switchName" backgroundColor="FF1f7806">
Code Writeable true switchName.backgroundColor = "FF1f7806"
Code Readable true let variable = switchName.backgroundColor

enabled
  Specifies whether the Switch should be active and clickable.
Data type: boolean
Designer Writable true <switch name="switchName" enabled="true">
Code Writeable true switchName.enabled = true
Code Readable true let variable = switchName.enabled

fontBold
  Specifies whether the text of the Switch should be bold. Some fonts do not support bold.
Data type: boolean
Designer Writable true <switch name="switchName" fontBold="true">
Code Writeable false
Code Readable false

fontItalic
  Specifies whether the text of the Switch should be italic. Some fonts do not support italic.
Data type: boolean
Designer Writable true <switch name="switchName" fontItalic="true">
Code Writeable false
Code Readable false

fontSize
  Specifies the text font size of the Switch, measured in sp(scale-independent pixels).
Data type: number
Designer Writable true <switch name="switchName" fontSize="24">
Code Writeable true switchName.fontSize = 24
Code Readable true let variable = switchName.fontSize

fontTypeface
  Specifies the text font face of the Switch as 'serif', 'sans serif', or 'monospace'.
Data type: string
Designer Writable true <switch name="switchName" fontTypeface="monospace">
Code Writeable false
Code Readable false

height
  Specifies the Switch's vertical height, measured in pixels.
Data type: number
Designer Writable false
Code Writeable true switchName.height = 45
Code Readable true let variable = switchName.height

heightPercent
  Specifies the Switch's vertical height as a percentage of the Screen's Height.
Data type: number
Designer Writable false
Code Writeable true switchName.heightPercent = 23
Code Readable false

on
  True if the switch is in the On state, false otherwise.
Data type: boolean
Designer Writable true <switch name="switchName" on="true">
Code Writeable true switchName.on = true
Code Readable true let variable = switchName.on

text
  Specifies the text displayed by the Switch.
Data type: string
Designer Writable true <switch name="switchName" text="Test text">
Code Writeable true switchName.text = "Test text"
Code Readable true let variable = switchName.text

textColor
  Specifies the text color of the Switch as an red-green-blue-alpha RRGGBBAA or red-green-blue RRGGBB string.
Data type: color
Designer Writable true <switch name="switchName" textColor="FFe62ce7">
Code Writeable true switchName.textColor = "FFe62ce7"
Code Readable true let variable = switchName.textColor

thumbColorActive
  Specifies the Switch's thumb color when switch is in the On state.
Data type: color
Designer Writable true <switch name="switchName" thumbColorActive="FF3cc2c1">
Code Writeable true switchName.thumbColorActive = "FF3cc2c1"
Code Readable true let variable = switchName.thumbColorActive

thumbColorInactive
  Specifies the Switch's thumb color when switch is in the Off state.
Data type: color
Designer Writable true <switch name="switchName" thumbColorInactive="FF776818">
Code Writeable true switchName.thumbColorInactive = "FF776818"
Code Readable true let variable = switchName.thumbColorInactive

trackColorActive
  Specifies the Switch's track color when in the On state.
Data type: color
Designer Writable true <switch name="switchName" trackColorActive="FF01a042">
Code Writeable true switchName.trackColorActive = "FF01a042"
Code Readable true let variable = switchName.trackColorActive

trackColorInactive
  Specifies the Switch's track color when in the Off state.
Data type: color
Designer Writable true <switch name="switchName" trackColorInactive="FF7bc3f8">
Code Writeable true switchName.trackColorInactive = "FF7bc3f8"
Code Readable true let variable = switchName.trackColorInactive

visible
  Specifies whether the Switch should be visible on the screen. Value is true if the Switch is showing and false if hidden.
Data type: boolean
Designer Writable true <switch name="switchName" visible="true">
Code Writeable true switchName.visible = true
Code Readable true let variable = switchName.visible

width
  Specifies the horizontal width of the Switch, measured in pixels.
Data type: number
Designer Writable false
Code Writeable true switchName.width = 98
Code Readable true let variable = switchName.width

widthPercent
  Specifies the horizontal width of the Switch as a percentage of the Screen's Width.
Data type: number
Designer Writable false
Code Writeable true switchName.widthPercent = 25
Code Readable false

class
  The styling class of the the component
Data type: string
Designer Writable true <switch name="switchName" class="Test class">
Code Writeable false
Code Readable false

id
  The styling id of the the component
Data type: string
Designer Writable true <switch name="switchName" id="Test id">
Code Writeable false
Code Readable false

name
  The name of the component that will be used to refer to it in code.
Data type: string
Designer Writable true <switch name="switchName" name="testComponent">
Code Writeable false
Code Readable false

Methods

Method name Description Parameters
addEventListener Method used to create event listeners.
See Events below for samples.
eventName string
eventCallbackFunction callback

Events

Event name Description Parameters
changed User change the state of the Switch from On to Off or back.
switchName.addEventListener(
    "changed",
    function () {
        //Your code here
    }
)
gotFocus Switch became the focused component.
switchName.addEventListener(
    "gotFocus",
    function () {
        //Your code here
    }
)
lostFocus Switch stopped being the focused component.
switchName.addEventListener(
    "lostFocus",
    function () {
        //Your code here
    }
)