Component: Button ( Control): Difference between revisions

Latest revision as of 14:37, 13 July 2026

Author	MatrixTSL
Version	1.0
Category	Control

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.

BasicControls.fcweb

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

@@ Line 5: / Line 5: @@
 |-
 | width="20%" style="color:gray;" | Version
-| 0.1
+| 1.0
 |-
 | width="20%" style="color:gray;" | Category
@@ Line 15: / Line 15: @@
 Creates a momentary or latching button.
-==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]
+==Version information==
+ Library Version, Component Version, Date, Author, Info
+, 1.0, 14-02-25, ST, Changed generated CSS to ensure disabled button 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_Button.fcsx FC_Comp_Source_WEBEXP_Button.fcsx]
 ==Detailed description==
@@ Line 27: / Line 29: @@
 ==Examples==
-''<span style="color:red;">No additional examples</span>''
+===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]
@@ Line 35: / Line 42: @@
 ==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;" | Caption
+| width="90%" class="mtx-class-propfolder" | Caption
 |-
 |-
@@ Line 90: / Line 97: @@
 | colspan="2" | Make the caption text crossed-out&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;" | Shape
+| width="90%" class="mtx-class-propfolder" | Shape
 |-
 |-
@@ Line 124: / Line 131: @@
 | colspan="2" | Specifies the fill colour of the shadow&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;" | Interaction
+| width="90%" class="mtx-class-propfolder" | Interaction
 |-
 |-
@@ Line 158: / Line 165: @@
 | colspan="2" | The colour of the button when the user presses it&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 167: / Line 174: @@
 | 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_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]

SteveT (talk | contribs)