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]
 ==Macro reference==
@@ Line 33: / 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 46: / Line 55: @@
 | width="90%" | Text
 |-
-| colspan="2" | &nbsp;
+| colspan="2" | The caption displayed on the button&nbsp;
 |-
 | width="10%" align="center" | [[File:Fc9-type-12-icon.png]]
 | width="90%" | Horizontal Alignment
 |-
-| colspan="2" | &nbsp;
+| colspan="2" | Aligns the caption text on the button&nbsp;
 |-
 | 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="90%" | Font Size
-|-
-| colspan="2" | &nbsp;
-|-
-| width="10%" align="center" | [[File:Fc9-type-21-icon.png]]
-| width="90%" | Font size
 |-
 | colspan="2" | The font size in pixels&nbsp;
@@ Line 76: / Line 80: @@
 | width="90%" | Bold
 |-
-| colspan="2" | &nbsp;
+| colspan="2" | Make the caption text bold&nbsp;
 |-
 | width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
 | width="90%" | Italic
 |-
-| colspan="2" | &nbsp;
+| colspan="2" | Make the caption text italicised&nbsp;
 |-
 | width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
 | width="90%" | Underline
 |-
-| colspan="2" | &nbsp;
+| colspan="2" | Make the caption text underlined&nbsp;
 |-
 | width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
 | width="90%" | Strikethrough
 |-
-| colspan="2" | &nbsp;
+| 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 100: / Line 104: @@
 | width="90%" | Colour
 |-
-| colspan="2" | Specifies the fill colour of the shape&nbsp;
+| colspan="2" | Specifies the fill colour of the button&nbsp;
 |-
 | width="10%" align="center" | [[File:Fc9-type-12-icon.png]]
 | width="90%" | Style
 |-
-| colspan="2" | &nbsp;
+| colspan="2" | The shape of the button&nbsp;
 |-
 | width="10%" align="center" | [[File:Fc9-type-21-icon.png]]
-| width="90%" | Border Width
+| width="90%" | Outline Size
-|-
-| colspan="2" | &nbsp;
-|-
-| width="10%" align="center" | [[File:Fc9-type-21-icon.png]]
-| width="90%" | Outline size
 |-
 | colspan="2" | The outline size in pixels&nbsp;
@@ Line 120: / Line 119: @@
 | width="90%" | Colour
 |-
-| colspan="2" | The outline colour of the shape&nbsp;
+| colspan="2" | The outline colour of the button&nbsp;
 |-
 | width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
 | width="90%" | Shadow
 |-
-| colspan="2" | &nbsp;
+| colspan="2" | Add a shadow to the button to provide a 3d look&nbsp;
 |-
 | width="10%" align="center" | [[File:Fc9-type-2-icon.png]]
 | width="90%" | Shadow Colour
 |-
-| colspan="2" | Specifies the fill colour of the shape&nbsp;
+| 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 139: / Line 138: @@
 | width="90%" | OnClick Macro
 |-
-| colspan="2" | &nbsp;
+| colspan="2" | The macro to call when the user clicks this button&nbsp;
 |-
 | width="10%" align="center" | [[File:Fc9-type-12-icon.png]]
 | width="90%" | Cursor
 |-
-| colspan="2" | &nbsp;
+| colspan="2" | The cursor shape when the user hovers the mouse over the button&nbsp;
 |-
 | width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
 | width="90%" | Show Press
 |-
-| colspan="2" | &nbsp;
+| colspan="2" | Offset the button when the user presses it&nbsp;
 |-
 | width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
 | width="90%" | Auto-colour
 |-
-| colspan="2" | &nbsp;
+| colspan="2" | Use default colour changes when the user hovers and presses the button&nbsp;
 |-
 | width="10%" align="center" | [[File:Fc9-type-2-icon.png]]
 | width="90%" | Hover Colour
 |-
-| colspan="2" | &nbsp;
+| colspan="2" | The colour of the button when the user hovers the mouse over it&nbsp;
 |-
 | width="10%" align="center" | [[File:Fc9-type-2-icon.png]]
 | width="90%" | Click Colour
 |-
-| colspan="2" | &nbsp;
+| 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 173: / Line 172: @@
 | width="90%" | Custom Attributes
 |-
-| colspan="2" | &nbsp;
+| 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)