Jump to content

Component: Switch ( Control): Difference between revisions

From Flowcode Help

SteveT (talk | contribs)

4 user groups
6,424 edits
Created page with "{| style="width:50%" |- | width="20%" style="color:gray;" | Author | MatrixTSL |- | width="20%" style="color:gray;" | Version | 0.1 |- | width="20%" style="color:gray;..."
 
m Text replacement - "style="background-color:#EAE1EA;"" to "class="mtx-class-propfolder""
 
(9 intermediate revisions by 2 users not shown)
Line 5: Line 5:
|-
|-
| width="20%" style="color:gray;" | Version
| width="20%" style="color:gray;" | Version
| 0.1
| 1.1
|-
|-
| width="20%" style="color:gray;" | Category
| width="20%" style="color:gray;" | Category
Line 15: Line 15:
Creates an on/off type toggle switch control.
Creates an on/off type toggle switch control.


==Component Source Code==
==Version information==


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]
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
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]
3, 1.1, 19-02-26, ST, Added to Ev_Initialise to ensure properties are updated when project loads


==Detailed description==
==Detailed description==
Line 28: Line 28:


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


==Macro reference==
==Macro reference==


===GetState===
===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" | &nbsp;
| colspan="2" | Returns the current state of the switch&nbsp;
|-
|-
|-
|-
Line 46: Line 48:


===SetState===
===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" | &nbsp;
| colspan="2" | Sets the current state of the switch&nbsp;
|-
|-
|-
|-
Line 57: Line 59:
| width="90%" | bState
| width="90%" | bState
|-
|-
| colspan="2" | &nbsp;
| 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="10%" align="center" style="border-top: 2px solid #000;" | [[File:Fc9-void-icon.png]] - VOID
Line 66: Line 68:
==Property reference==
==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 79: Line 81:
| width="90%" | State
| width="90%" | State
|-
|-
| colspan="2" | &nbsp;
| colspan="2" | The initial state of the switch&nbsp;
|-
|-
| width="10%" align="center" | [[File:Fc9-type-24-icon.png]]
| width="10%" align="center" | [[File:Fc9-type-24-icon.png]]
| width="90%" | OnClick Macro
| width="90%" | OnClick Macro
|-
|-
| colspan="2" | &nbsp;
| colspan="2" | The macro to call when the user clicks this switch&nbsp;
|-
|-
| width="10%" align="center" | [[File:Fc9-type-12-icon.png]]
| width="10%" align="center" | [[File:Fc9-type-12-icon.png]]
| width="90%" | Cursor
| width="90%" | Cursor
|-
|-
| colspan="2" | &nbsp;
| 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="10%" align="center" | [[File:Fc9-type-21-icon.png]]
| width="90%" | Transition Speed
| width="90%" | Transition Speed
|-
|-
| colspan="2" | &nbsp;
| colspan="2" | The animation speed (in ms) when the switch is pressed&nbsp;
|-
|-
| width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
| width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
| width="90%" | Auto Return
| width="90%" | Auto Return
|-
|-
| colspan="2" | &nbsp;
| 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 108: Line 110:
| width="90%" | On Label
| width="90%" | On Label
|-
|-
| colspan="2" | &nbsp;
| 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="10%" align="center" | [[File:Fc9-type-10-icon.png]]
| width="90%" | Off Label
| width="90%" | Off Label
|-
|-
| colspan="2" | &nbsp;
| 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="10%" align="center" | [[File:Fc9-type-12-icon.png]]
| width="90%" | Style
| width="90%" | Style
|-
|-
| colspan="2" | &nbsp;
| colspan="2" | The colour style of the switch&nbsp;
|-
|-
| width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
| width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
| width="90%" | Show Thumb
| width="90%" | Show Thumb
|-
|-
| colspan="2" | &nbsp;
| colspan="2" | Show or hide the thumb of the switch&nbsp;
|-
| width="10%" align="center" | [[File:Fc9-type-21-icon.png]]
| width="90%" | Border Width
|-
| colspan="2" | &nbsp;
|-
|-
| width="10%" align="center" | [[File:Fc9-type-21-icon.png]]
| width="10%" align="center" | [[File:Fc9-type-21-icon.png]]
| width="90%" | Outline size
| width="90%" | Outline Size
|-
|-
| colspan="2" | The outline size in pixels&nbsp;
| colspan="2" | The outline size in pixels&nbsp;
Line 138: Line 135:
| width="90%" | Border Radius
| width="90%" | Border Radius
|-
|-
| colspan="2" | &nbsp;
| colspan="2" | The curvature radius of the corners of the switch&nbsp;
|-
|-
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]]
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]]
| width="90%" | Border Colour
| width="90%" | Border Colour
|-
|-
| colspan="2" | The outline colour of the shape&nbsp;
| 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 152: Line 149:
| width="90%" | Font
| width="90%" | Font
|-
|-
| colspan="2" | Specifies the font style for the item&nbsp;
| colspan="2" | Specifies the font style for the switch&nbsp;
|-
|-
| width="10%" align="center" | [[File:Fc9-type-21-icon.png]]
| width="10%" align="center" | [[File:Fc9-type-21-icon.png]]
| width="90%" | Font Size
| width="90%" | Font Size
|-
| colspan="2" | &nbsp;
|-
| width="10%" align="center" | [[File:Fc9-type-21-icon.png]]
| width="90%" | Font size
|-
|-
| colspan="2" | The font size in pixels&nbsp;
| colspan="2" | The font size in pixels&nbsp;
Line 167: Line 159:
| width="90%" | Bold
| width="90%" | Bold
|-
|-
| colspan="2" | &nbsp;
| colspan="2" | Make the caption text bold&nbsp;
|-
|-
| width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
| width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
| width="90%" | Italic
| width="90%" | Italic
|-
|-
| colspan="2" | &nbsp;
| colspan="2" | Make the caption text italicised&nbsp;
|-
|-
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]]
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]]
| width="90%" | Colour
| width="90%" | Colour
|-
|-
| colspan="2" | Specifies the fill colour of the shape&nbsp;
| colspan="2" | The fill colour of the switch when off&nbsp;
|-
|-
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]]
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]]
| width="90%" | Gradient
| width="90%" | Gradient
|-
|-
| colspan="2" | &nbsp;
| colspan="2" | The secondary fill colour of the switch when off&nbsp;
|-
|-
| width="10%" align="center" | [[File:Fc9-type-12-icon.png]]
| width="10%" align="center" | [[File:Fc9-type-12-icon.png]]
| width="90%" | Gradient Style
| width="90%" | Gradient Style
|-
|-
| colspan="2" | &nbsp;
| colspan="2" | The gradient fill type of the switch when off&nbsp;
|-
|-
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]]
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]]
| width="90%" | Text
| width="90%" | Text
|-
|-
| colspan="2" | Specifies the font colour for the item&nbsp;
| colspan="2" | The font colour for the switch when off&nbsp;
|-
|-
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]]
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]]
| width="90%" | Colour
| width="90%" | Colour
|-
|-
| colspan="2" | Specifies the fill colour of the shape&nbsp;
| colspan="2" | The fill colour of the switch when on&nbsp;
|-
|-
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]]
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]]
| width="90%" | Gradient
| width="90%" | Gradient
|-
|-
| colspan="2" | &nbsp;
| colspan="2" | The secondary fill colour of the switch when on&nbsp;
|-
|-
| width="10%" align="center" | [[File:Fc9-type-12-icon.png]]
| width="10%" align="center" | [[File:Fc9-type-12-icon.png]]
| width="90%" | Gradient Style
| width="90%" | Gradient Style
|-
|-
| colspan="2" | &nbsp;
| colspan="2" | The gradient fill type of the switch when on&nbsp;
|-
|-
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]]
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]]
| width="90%" | Text
| width="90%" | Text
|-
|-
| colspan="2" | Specifies the font colour for the item&nbsp;
| 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
|-
|-
|-
|-
Line 221: Line 213:
| width="90%" | Custom Attributes
| width="90%" | Custom Attributes
|-
|-
| colspan="2" | &nbsp;
| 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]

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

Retrieved from "https://www.flowcode.co.uk/wiki/index.php?title=Component:_Switch_(_Control)&oldid=48364"