Difference between revisions of "Component: Button ( 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;...") |
|||
| (One intermediate revision 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 a momentary or latching button. | Creates a momentary or latching button. | ||
| − | == | + | ==Version information== |
| − | + | Library Version, Component Version, Date, Author, Info | |
| + | |||
| − | |||
==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== | ||
| Line 46: | Line 48: | ||
| width="90%" | Text | | width="90%" | Text | ||
|- | |- | ||
| − | | colspan="2" | | + | | colspan="2" | The caption displayed on the button |
|- | |- | ||
| width="10%" align="center" | [[File:Fc9-type-12-icon.png]] | | width="10%" align="center" | [[File:Fc9-type-12-icon.png]] | ||
| width="90%" | Horizontal Alignment | | width="90%" | Horizontal Alignment | ||
|- | |- | ||
| − | | colspan="2" | | + | | colspan="2" | Aligns the caption text on the button |
|- | |- | ||
| width="10%" align="center" | [[File:Fc9-type-3-icon.png]] | | width="10%" align="center" | [[File:Fc9-type-3-icon.png]] | ||
| Line 60: | Line 62: | ||
| 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 76: | Line 73: | ||
| 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-7-icon.png]] | | width="10%" align="center" | [[File:Fc9-type-7-icon.png]] | ||
| width="90%" | Underline | | width="90%" | Underline | ||
|- | |- | ||
| − | | colspan="2" | | + | | colspan="2" | Make the caption text underlined |
|- | |- | ||
| width="10%" align="center" | [[File:Fc9-type-7-icon.png]] | | width="10%" align="center" | [[File:Fc9-type-7-icon.png]] | ||
| width="90%" | Strikethrough | | width="90%" | Strikethrough | ||
|- | |- | ||
| − | | colspan="2" | | + | | colspan="2" | Make the caption text crossed-out |
|- | |- | ||
| 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 100: | Line 97: | ||
| width="90%" | Colour | | width="90%" | Colour | ||
|- | |- | ||
| − | | colspan="2" | Specifies the fill colour of the | + | | colspan="2" | Specifies the fill colour of the button |
|- | |- | ||
| 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 shape of the button |
|- | |- | ||
| 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 120: | Line 112: | ||
| width="90%" | Colour | | width="90%" | Colour | ||
|- | |- | ||
| − | | colspan="2" | The outline colour of the | + | | colspan="2" | The outline colour of the button |
|- | |- | ||
| width="10%" align="center" | [[File:Fc9-type-7-icon.png]] | | width="10%" align="center" | [[File:Fc9-type-7-icon.png]] | ||
| width="90%" | Shadow | | width="90%" | Shadow | ||
|- | |- | ||
| − | | colspan="2" | | + | | colspan="2" | Add a shadow to the button to provide a 3d look |
|- | |- | ||
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]] | | width="10%" align="center" | [[File:Fc9-type-2-icon.png]] | ||
| width="90%" | Shadow Colour | | width="90%" | Shadow Colour | ||
|- | |- | ||
| − | | colspan="2" | Specifies the fill colour of the | + | | colspan="2" | Specifies the fill colour of the shadow |
|- | |- | ||
| 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 139: | Line 131: | ||
| width="90%" | OnClick Macro | | width="90%" | OnClick Macro | ||
|- | |- | ||
| − | | colspan="2" | | + | | colspan="2" | The macro to call when the user clicks this button |
|- | |- | ||
| 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 the button |
|- | |- | ||
| width="10%" align="center" | [[File:Fc9-type-7-icon.png]] | | width="10%" align="center" | [[File:Fc9-type-7-icon.png]] | ||
| width="90%" | Show Press | | width="90%" | Show Press | ||
|- | |- | ||
| − | | colspan="2" | | + | | colspan="2" | Offset the button when the user presses it |
|- | |- | ||
| width="10%" align="center" | [[File:Fc9-type-7-icon.png]] | | width="10%" align="center" | [[File:Fc9-type-7-icon.png]] | ||
| width="90%" | Auto-colour | | width="90%" | Auto-colour | ||
|- | |- | ||
| − | | colspan="2" | | + | | colspan="2" | Use default colour changes when the user hovers and presses the button |
|- | |- | ||
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]] | | width="10%" align="center" | [[File:Fc9-type-2-icon.png]] | ||
| width="90%" | Hover Colour | | width="90%" | Hover Colour | ||
|- | |- | ||
| − | | colspan="2" | | + | | colspan="2" | The colour of the button when the user hovers the mouse over it |
|- | |- | ||
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]] | | width="10%" align="center" | [[File:Fc9-type-2-icon.png]] | ||
| width="90%" | Click Colour | | width="90%" | Click Colour | ||
|- | |- | ||
| − | | colspan="2" | | + | | colspan="2" | The colour of the button when the user presses it |
|- | |- | ||
| 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 173: | Line 165: | ||
| 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_Button.fcsx FC_Comp_Source_WEBEXP_Button.fcsx] | ||
| + | |||
| + | Please click here to view the component source code (Beta): [https://www.flowcode.co.uk/FlowchartView/?wfile=componentsource/FC_Comp_Source_WEBEXP_Button.fcsx FC_Comp_Source_WEBEXP_Button.fcsx] | ||
Latest revision as of 08:59, 9 June 2025
| Author | MatrixTSL |
| Version | 1.0 |
| Category | Control |
Contents
Button component
Creates a momentary or latching button.
Version information
Library Version, Component Version, Date, Author, Info
Detailed description
No detailed description exists yet for this component
Examples
No additional examples
Macro reference
Property reference
|
Properties |
|
Caption |
|
Text |
| The caption displayed on the button | |
|
Horizontal Alignment |
| Aligns the caption text on the button | |
|
Font |
| Specifies the font style for the item | |
|
Font Size |
| The font size in pixels | |
|
Colour |
| Specifies the font colour for the item | |
|
Bold |
| Make the caption text bold | |
|
|
Italic |
| Make the caption text italicised | |
|
|
Underline |
| Make the caption text underlined | |
|
|
Strikethrough |
| Make the caption text crossed-out | |
|
|
Shape |
|
|
Colour |
| Specifies the fill colour of the button | |
|
|
Style |
| The shape of the button | |
|
|
Outline Size |
| The outline size in pixels | |
|
|
Colour |
| The outline colour of the button | |
|
|
Shadow |
| Add a shadow to the button to provide a 3d look | |
|
|
Shadow Colour |
| Specifies the fill colour of the shadow | |
|
|
Interaction |
|
OnClick Macro |
| The macro to call when the user clicks this button | |
|
|
Cursor |
| The cursor shape when the user hovers the mouse over the button | |
|
|
Show Press |
| Offset the button when the user presses it | |
|
|
Auto-colour |
| Use default colour changes when the user hovers and presses the button | |
|
|
Hover Colour |
| The colour of the button when the user hovers the mouse over it | |
|
|
Click Colour |
| The colour of the button when the user presses it | |
|
|
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_Button.fcsx
Please click here to view the component source code (Beta): FC_Comp_Source_WEBEXP_Button.fcsx
