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;...") |
(added an example) |
||
| (3 intermediate revisions by one other 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 | ||
| + | 2, 1.0, 14-02-25, ST, Changed generated CSS to ensure disabled button has appropriate features | ||
| + | |||
| − | |||
==Detailed description== | ==Detailed description== | ||
| Line 27: | Line 29: | ||
==Examples== | ==Examples== | ||
| − | + | ===BasicControls example=== | |
| + | This simple example shows how to sue some basic controls in a Web Developer project. | ||
| + | |||
| + | {{Fcfile|BasicControls.fcweb|BasicControls.fcweb}} | ||
| + | |||
| + | The web app created by this example can be viewed here: [https://www.flowcode.co.uk/example/WebComps/BasicControls.html BasicControls Example] | ||
| + | |||
| + | |||
==Macro reference== | ==Macro reference== | ||
| Line 46: | Line 55: | ||
| 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 69: | ||
| 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 80: | ||
| 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 104: | ||
| 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 119: | ||
| 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 138: | ||
| 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 172: | ||
| 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 17:05, 28 April 2026
| 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 2, 1.0, 14-02-25, ST, Changed generated CSS to ensure disabled button has appropriate features
Detailed description
No detailed description exists yet for this component
Examples
BasicControls example
This simple example shows how to sue some basic controls in a Web Developer project.
The web app created by this example can be viewed here: BasicControls Example
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
