Component: Button ( Control): Difference between revisions

Latest revision as of 14:37, 13 July 2026

Creates a momentary or latching button.

Library Version, Component Version, Date, Author, Info
2, 1.0, 14-02-25, ST, Changed generated CSS to ensure disabled button has appropriate features

No detailed description exists yet for this component

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

	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

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 48: / Line 48: @@
 |-
 |-
-| 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%" class="mtx-class-propfolder" | Caption
 |-
@@ Line 97: / 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%" class="mtx-class-propfolder" | Shape
 |-
@@ Line 131: / 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%" class="mtx-class-propfolder" | Interaction
 |-
@@ Line 165: / 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%" class="mtx-class-propfolder" | Advanced
 |-