Component: Switch ( Control): Difference between revisions

Latest revision as of 14:37, 13 July 2026

Author	MatrixTSL
Version	1.1
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

No additional examples

Macro reference

GetState

	GetState
Returns the current state of the switch
- BOOL	Return

SetState

	SetState
Sets the current state of the switch
- BOOL	bState
The state to set (true = on)
- VOID	Return

Property reference

	Properties
	Behaviour
	State
The initial state of the switch
	OnClick Macro
The macro to call when the user clicks this switch
	Cursor
The cursor shape when the user hovers the mouse over this switch
	Transition Speed
The animation speed (in ms) when the switch is pressed
	Auto Return
Set true to automatically return the switch to its default state
	Appearance
	On Label
The text to show when the switch is in the on state
	Off Label
The text to show when the switch is in the off state
	Style
The colour style of the switch
	Show Thumb
Show or hide the thumb of the switch
	Outline Size
The outline size in pixels
	Border Radius
The curvature radius of the corners of the switch
	Border Colour
The outline colour of the switch
	Font
	Font
Specifies the font style for the switch
	Font Size
The font size in pixels
	Bold
Make the caption text bold
	Italic
Make the caption text italicised
	Colour
The fill colour of the switch when off
	Gradient
The secondary fill colour of the switch when off
	Gradient Style
The gradient fill type of the switch when off
	Text
The font colour for the switch when off
	Colour
The fill colour of the switch when on
	Gradient
The secondary fill colour of the switch when on
	Gradient Style
The gradient fill type of the switch when on
	Text
The font colour for the switch when on
	Advanced
	Custom Attributes
Text here will be added to the html tag of this component to allow advanced customisation

Component Source Code

Please click here to download the component source project: FC_Comp_Source_WEBEXP_Switch.fcsx

Please click here to view the component source code (Beta): FC_Comp_Source_WEBEXP_Switch.fcsx

@@ Line 34: / Line 34: @@
 ===GetState===
-{| class="wikitable" style="width:60%; background-color:#FFFFFF;"
+{| class="mtx-class-macrotable wikitable"
 |-
-| width="10%" align="center" style="background-color:#D8C9D8;" align="center" | [[File:Fc9-comp-macro.png]]
+| width="10%" align="center" class="mtx-class-macrohead" | [[File:Fc9-comp-macro.png]]
-| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''GetState'''
+| width="90%" class="mtx-class-macrohead" | '''GetState'''
 |-
 | colspan="2" | Returns the current state of the switch&nbsp;
@@ Line 48: / Line 48: @@
 ===SetState===
-{| class="wikitable" style="width:60%; background-color:#FFFFFF;"
+{| class="mtx-class-macrotable wikitable"
 |-
-| width="10%" align="center" style="background-color:#D8C9D8;" align="center" | [[File:Fc9-comp-macro.png]]
+| width="10%" align="center" class="mtx-class-macrohead" | [[File:Fc9-comp-macro.png]]
-| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''SetState'''
+| width="90%" class="mtx-class-macrohead" | '''SetState'''
 |-
 | colspan="2" | Sets the current state of the switch&nbsp;
@@ Line 68: / Line 68: @@
 ==Property reference==
-{| class="wikitable" style="width:60%; background-color:#FFFFFF;"
+{| class="mtx-class-macrotable wikitable"
 |-
-| width="10%" align="center" style="background-color:#D8C9D8;" | [[File:Fc9-prop-icon.png]]
+| width="10%" align="center" class="mtx-class-macrohead" | [[File:Fc9-prop-icon.png]]
-| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''Properties'''
+| width="90%" class="mtx-class-macrohead" | '''Properties'''
 |-
 |-
-| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
+| width="10%" align="center" class="mtx-class-propfolder" | [[File:Fc9-conn-icon.png]]
-| width="90%" style="background-color:#EAE1EA; color:#4B008D;" | Behaviour
+| width="90%" class="mtx-class-propfolder" | Behaviour
 |-
 |-
@@ Line 103: / Line 103: @@
 | 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="10%" align="center" class="mtx-class-propfolder" | [[File:Fc9-conn-icon.png]]
-| width="90%" style="background-color:#EAE1EA; color:#4B008D;" | Appearance
+| width="90%" class="mtx-class-propfolder" | Appearance
 |-
 |-
@@ Line 142: / Line 142: @@
 | colspan="2" | The outline colour of the switch&nbsp;
 |-
-| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
+| width="10%" align="center" class="mtx-class-propfolder" | [[File:Fc9-conn-icon.png]]
-| width="90%" style="background-color:#EAE1EA; color:#4B008D;" | Font
+| width="90%" class="mtx-class-propfolder" | Font
 |-
 |-
@@ Line 206: / Line 206: @@
 | 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="10%" align="center" class="mtx-class-propfolder" | [[File:Fc9-conn-icon.png]]
-| width="90%" style="background-color:#EAE1EA; color:#4B008D;" | Advanced
+| width="90%" class="mtx-class-propfolder" | Advanced
 |-
 |-

SteveT (talk | contribs)