Difference between revisions of "Component: Switch ( Control)"
From Flowcode Help
Jump to navigationJump to search (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;...") |
|||
| (2 intermediate revisions by the same user not shown) | |||
| Line 5: | Line 5: | ||
|- | |- | ||
| width="20%" style="color:gray;" | Version | | width="20%" style="color:gray;" | Version | ||
| − | | 0 | + | | 1.0 |
|- | |- | ||
| 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. | ||
| − | == | + | ==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 | ||
| + | |||
| − | |||
==Detailed description== | ==Detailed description== | ||
| Line 28: | Line 29: | ||
''<span style="color:red;">No additional examples</span>'' | ''<span style="color:red;">No additional examples</span>'' | ||
| + | |||
| + | |||
==Macro reference== | ==Macro reference== | ||
| Line 37: | Line 40: | ||
| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''GetState''' | | width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''GetState''' | ||
|- | |- | ||
| − | | colspan="2" | | + | | colspan="2" | Returns the current state of the switch |
|- | |- | ||
|- | |- | ||
| Line 51: | Line 54: | ||
| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''SetState''' | | width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''SetState''' | ||
|- | |- | ||
| − | | colspan="2" | | + | | colspan="2" | Sets the current state of the switch |
|- | |- | ||
|- | |- | ||
| Line 57: | Line 60: | ||
| width="90%" | bState | | width="90%" | bState | ||
|- | |- | ||
| − | | colspan="2" | | + | | colspan="2" | The state to set (true = on) |
|- | |- | ||
| 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 79: | Line 82: | ||
| width="90%" | State | | width="90%" | State | ||
|- | |- | ||
| − | | colspan="2" | | + | | colspan="2" | The initial state of the switch |
|- | |- | ||
| 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" | | + | | colspan="2" | The macro to call when the user clicks this switch |
|- | |- | ||
| 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" | | + | | colspan="2" | The cursor shape when the user hovers the mouse over this switch |
|- | |- | ||
| 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" | | + | | colspan="2" | The animation speed (in ms) when the switch is pressed |
|- | |- | ||
| 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" | | + | | colspan="2" | Set true to automatically return the switch to its default state |
|- | |- | ||
| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]] | | width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]] | ||
| Line 108: | Line 111: | ||
| width="90%" | On Label | | width="90%" | On Label | ||
|- | |- | ||
| − | | colspan="2" | | + | | colspan="2" | The text to show when the switch is in the on state |
|- | |- | ||
| 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" | | + | | colspan="2" | The text to show when the switch is in the off state |
|- | |- | ||
| 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" | | + | | colspan="2" | The colour style of the switch |
|- | |- | ||
| 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" | | + | | colspan="2" | Show or hide the thumb of the switch |
|- | |- | ||
| 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 | ||
|- | |- | ||
| colspan="2" | The outline size in pixels | | colspan="2" | The outline size in pixels | ||
| Line 138: | Line 136: | ||
| width="90%" | Border Radius | | width="90%" | Border Radius | ||
|- | |- | ||
| − | | colspan="2" | | + | | colspan="2" | The curvature radius of the corners of the switch |
|- | |- | ||
| 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 | + | | colspan="2" | The outline colour of the switch |
|- | |- | ||
| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]] | | width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]] | ||
| Line 152: | Line 150: | ||
| width="90%" | Font | | width="90%" | Font | ||
|- | |- | ||
| − | | colspan="2" | Specifies the font style for the | + | | colspan="2" | Specifies the font style for the switch |
|- | |- | ||
| 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" | The font size in pixels | | colspan="2" | The font size in pixels | ||
| Line 167: | Line 160: | ||
| width="90%" | Bold | | width="90%" | Bold | ||
|- | |- | ||
| − | | colspan="2" | | + | | colspan="2" | Make the caption text bold |
|- | |- | ||
| 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" | | + | | colspan="2" | Make the caption text italicised |
|- | |- | ||
| 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" | | + | | colspan="2" | The fill colour of the switch when off |
|- | |- | ||
| 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" | | + | | colspan="2" | The secondary fill colour of the switch when off |
|- | |- | ||
| 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" | | + | | colspan="2" | The gradient fill type of the switch when off |
|- | |- | ||
| 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" | | + | | colspan="2" | The font colour for the switch when off |
|- | |- | ||
| 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" | | + | | colspan="2" | The fill colour of the switch when on |
|- | |- | ||
| 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" | | + | | colspan="2" | The secondary fill colour of the switch when on |
|- | |- | ||
| 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" | | + | | colspan="2" | The gradient fill type of the switch when on |
|- | |- | ||
| 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" | | + | | colspan="2" | The font colour for the switch when on |
|- | |- | ||
| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]] | | width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]] | ||
| Line 221: | Line 214: | ||
| width="90%" | Custom Attributes | | width="90%" | Custom Attributes | ||
|- | |- | ||
| − | | colspan="2" | | + | | colspan="2" | 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: [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 21:17, 27 January 2026
| Author | MatrixTSL |
| Version | 1.0 |
| Category | Control |
Contents
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
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
