View source for Component: Switch ( Control)

{| style="width:50%"
|-
| width="20%" style="color:gray;" | Author
| MatrixTSL
|-
| width="20%" style="color:gray;" | Version
| 1.1
|-
| width="20%" style="color:gray;" | Category
|  Control
|}


==Switch component==
Creates an on/off type toggle switch control.

==Version information==

 Library Version, Component Version, Date, Author, Info
 2, 1.0, 17-02-25, ST, Changed generated CSS to ensure visible/disabled switch has appropriate features
 3, 1.1, 19-02-26, ST, Added to Ev_Initialise to ensure properties are updated when project loads

==Detailed description==

''No detailed description exists yet for this component''

==Examples==

''<span style="color:red;">No additional examples</span>''



==Macro reference==

===GetState===
{| class="mtx-class-macrotable wikitable"
|-
| width="10%" align="center" class="mtx-class-macrohead" | [[File:Fc9-comp-macro.png]]
| width="90%" class="mtx-class-macrohead" | '''GetState'''
|-
| colspan="2" | Returns the current state of the switch&nbsp;
|-
|-
| width="10%" align="center" style="border-top: 2px solid #000;" | [[File:Fc9-bool-icon.png]] - BOOL
| width="90%" style="border-top: 2px solid #000;" | ''Return''
|}


===SetState===
{| class="mtx-class-macrotable wikitable"
|-
| width="10%" align="center" class="mtx-class-macrohead" | [[File:Fc9-comp-macro.png]]
| width="90%" class="mtx-class-macrohead" | '''SetState'''
|-
| colspan="2" | Sets the current state of the switch&nbsp;
|-
|-
| width="10%" align="center" | [[File:Fc9-bool-icon.png]] - BOOL
| width="90%" | bState
|-
| colspan="2" | The state to set (true = on)&nbsp;
|-
| width="10%" align="center" style="border-top: 2px solid #000;" | [[File:Fc9-void-icon.png]] - VOID
| width="90%" style="border-top: 2px solid #000;" | ''Return''
|}


==Property reference==

{| class="mtx-class-macrotable wikitable"
|-
| width="10%" align="center" class="mtx-class-macrohead" | [[File:Fc9-prop-icon.png]]
| width="90%" class="mtx-class-macrohead" | '''Properties''' 
|-
|-
| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
| width="90%" style="background-color:#EAE1EA; color:#4B008D;" | Behaviour
|-
|-
| width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
| width="90%" | State
|-
| colspan="2" | The initial state of the switch&nbsp;
|-
| width="10%" align="center" | [[File:Fc9-type-24-icon.png]]
| width="90%" | OnClick Macro
|-
| colspan="2" | The macro to call when the user clicks this switch&nbsp;
|-
| width="10%" align="center" | [[File:Fc9-type-12-icon.png]]
| width="90%" | Cursor
|-
| colspan="2" | The cursor shape when the user hovers the mouse over this switch&nbsp;
|-
| width="10%" align="center" | [[File:Fc9-type-21-icon.png]]
| width="90%" | Transition Speed
|-
| colspan="2" | The animation speed (in ms) when the switch is pressed&nbsp;
|-
| width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
| width="90%" | Auto Return
|-
| colspan="2" | Set true to automatically return the switch to its default state&nbsp;
|-
| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
| width="90%" style="background-color:#EAE1EA; color:#4B008D;" | Appearance
|-
|-
| width="10%" align="center" | [[File:Fc9-type-10-icon.png]]
| width="90%" | On Label
|-
| colspan="2" | The text to show when the switch is in the on state&nbsp;
|-
| width="10%" align="center" | [[File:Fc9-type-10-icon.png]]
| width="90%" | Off Label
|-
| colspan="2" | The text to show when the switch is in the off state&nbsp;
|-
| width="10%" align="center" | [[File:Fc9-type-12-icon.png]]
| width="90%" | Style
|-
| colspan="2" | The colour style of the switch&nbsp;
|-
| width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
| width="90%" | Show Thumb
|-
| colspan="2" | Show or hide the thumb of the switch&nbsp;
|-
| width="10%" align="center" | [[File:Fc9-type-21-icon.png]]
| width="90%" | Outline Size
|-
| colspan="2" | The outline size in pixels&nbsp;
|-
| width="10%" align="center" | [[File:Fc9-type-21-icon.png]]
| width="90%" | Border Radius
|-
| colspan="2" | The curvature radius of the corners of the switch&nbsp;
|-
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]]
| width="90%" | Border Colour
|-
| colspan="2" | The outline colour of the switch&nbsp;
|-
| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
| width="90%" style="background-color:#EAE1EA; color:#4B008D;" | Font
|-
|-
| width="10%" align="center" | [[File:Fc9-type-3-icon.png]]
| width="90%" | Font
|-
| colspan="2" | Specifies the font style for the switch&nbsp;
|-
| width="10%" align="center" | [[File:Fc9-type-21-icon.png]]
| width="90%" | Font Size
|-
| colspan="2" | The font size in pixels&nbsp;
|-
| width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
| width="90%" | Bold
|-
| colspan="2" | Make the caption text bold&nbsp;
|-
| width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
| width="90%" | Italic
|-
| colspan="2" | Make the caption text italicised&nbsp;
|-
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]]
| width="90%" | Colour
|-
| colspan="2" | The fill colour of the switch when off&nbsp;
|-
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]]
| width="90%" | Gradient
|-
| colspan="2" | The secondary fill colour of the switch when off&nbsp;
|-
| width="10%" align="center" | [[File:Fc9-type-12-icon.png]]
| width="90%" | Gradient Style
|-
| colspan="2" | The gradient fill type of the switch when off&nbsp;
|-
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]]
| width="90%" | Text
|-
| colspan="2" | The font colour for the switch when off&nbsp;
|-
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]]
| width="90%" | Colour
|-
| colspan="2" | The fill colour of the switch when on&nbsp;
|-
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]]
| width="90%" | Gradient
|-
| colspan="2" | The secondary fill colour of the switch when on&nbsp;
|-
| width="10%" align="center" | [[File:Fc9-type-12-icon.png]]
| width="90%" | Gradient Style
|-
| colspan="2" | The gradient fill type of the switch when on&nbsp;
|-
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]]
| width="90%" | Text
|-
| colspan="2" | The font colour for the switch when on&nbsp;
|-
| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
| width="90%" style="background-color:#EAE1EA; color:#4B008D;" | Advanced
|-
|-
| width="10%" align="center" | [[File:Fc9-type-10-icon.png]]
| width="90%" | Custom Attributes
|-
| colspan="2" | Text here will be added to the html tag of this component to allow advanced customisation&nbsp;
|}

==Component Source Code==

Please click here to download the component source project: [https://www.flowcode.co.uk/wiki/componentsource/FC_Comp_Source_WEBEXP_Switch.fcsx FC_Comp_Source_WEBEXP_Switch.fcsx]

Please click here to view the component source code (Beta): [https://www.flowcode.co.uk/FlowchartView/?wfile=componentsource/FC_Comp_Source_WEBEXP_Switch.fcsx FC_Comp_Source_WEBEXP_Switch.fcsx]