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;...") |
|||
| 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 | + | | width="90%" | Outline Size |
|- | |- | ||
| 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 |
|} | |} | ||
Revision as of 15:07, 5 December 2023
| Author | MatrixTSL |
| Version | 0.1 |
| Category | Control |
Contents
Button component
Creates a momentary or latching button.
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
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 | |
