View source for Component: Button ( Control)

{| style="width:50%"
|-
| width="20%" style="color:gray;" | Author
| MatrixTSL
|-
| width="20%" style="color:gray;" | Version
| 1.0
|-
| width="20%" style="color:gray;" | 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.

{{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==

==Property reference==

{| class="mtx-class-macrotable wikitable"
|-
| width="10%" align="center" class="mtx-class-macrohead" | [[File:Fc9-prop-icon.png]]
| width="90%" class="mtx-class-macrohead" | '''Properties''' 
|-
|-
| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
| width="90%" class="mtx-class-propfolder" | Caption
|-
|-
| width="10%" align="center" | [[File:Fc9-type-10-icon.png]]
| width="90%" | Text
|-
| 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" | Aligns the caption text on the button&nbsp;
|-
| width="10%" align="center" | [[File:Fc9-type-3-icon.png]]
| width="90%" | Font
|-
| colspan="2" | Specifies the font style for the item&nbsp;
|-
| width="10%" align="center" | [[File:Fc9-type-21-icon.png]]
| width="90%" | Font Size
|-
| colspan="2" | The font size in pixels&nbsp;
|-
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]]
| width="90%" | Colour
|-
| colspan="2" | Specifies the font colour for the item&nbsp;
|-
| width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
| width="90%" | Bold
|-
| colspan="2" | Make the caption text bold&nbsp;
|-
| width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
| width="90%" | Italic
|-
| colspan="2" | Make the caption text italicised&nbsp;
|-
| width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
| width="90%" | Underline
|-
| colspan="2" | Make the caption text underlined&nbsp;
|-
| width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
| width="90%" | Strikethrough
|-
| colspan="2" | Make the caption text crossed-out&nbsp;
|-
| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
| width="90%" class="mtx-class-propfolder" | Shape
|-
|-
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]]
| width="90%" | Colour
|-
| 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" | The shape of the button&nbsp;
|-
| width="10%" align="center" | [[File:Fc9-type-21-icon.png]]
| width="90%" | Outline Size
|-
| colspan="2" | The outline size in pixels&nbsp;
|-
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]]
| width="90%" | Colour
|-
| colspan="2" | The outline colour of the button&nbsp;
|-
| width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
| width="90%" | Shadow
|-
| 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 shadow&nbsp;
|-
| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
| width="90%" class="mtx-class-propfolder" | Interaction
|-
|-
| width="10%" align="center" | [[File:Fc9-type-24-icon.png]]
| width="90%" | OnClick Macro
|-
| 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" | 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" | 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" | 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" | 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" | 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="90%" class="mtx-class-propfolder" | Advanced
|-
|-
| width="10%" align="center" | [[File:Fc9-type-10-icon.png]]
| width="90%" | Custom Attributes
|-
| 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]