Toggle Button
The toggle button is a switching element that can be switched between two states. The 'Toggle Group' attribute can be used to interconnect different toggle buttons. When a new toggle button is activated, the previously activated button is automatically deactivated.
Attributes
Category: Colors
Name |
Description |
---|---|
Definition of the background color | |
Definition of the border color of the control |
Category: Layout
Name |
Description |
---|---|
Definition of the distance from the left side to the left side of the surrounding control | |
Definition of the unit of the distance to the right side of the surrounding control:
| |
Definition of the distance from the top side to the top side of the surrounding control | |
Selection of the unit of the distance to the top side of the surrounding control:
| |
Definition of the distance from the right side to the right side of the surrounding control | |
Selection of the unit of the distance to the right side of the surrounding control:
| |
Definition of the distance from the bottom side to the bottom side of the surrounding control | |
Selection of the unit of the distance to the bottom side of the surrounding control:
| |
Definition of the external width of the control | |
Selection of the unit of the width:
| |
Definition of the external height of the control | |
Selection of the unit of the height:
| |
Definition of the maximum width if the control size is defined as dynamic | |
Selection of the unit of the maximum width:
| |
Definition of the minimum width if the control size is defined as dynamic | |
Selection of the unit of the minimum width:
| |
Definition of the maximum height if the control size is defined as dynamic | |
Selection of the unit of the maximum height:
| |
Definition of the minimum height if the control size is defined as dynamic | |
Selection of the unit of the minimum height:
| |
Calculated distance in pixels from the left side to the left side of the surrounding control | |
Calculated distance in pixels from the top side to the top side of the surrounding control | |
Calculated distance in pixels from the right side to the right side of the surrounding control | |
Calculated distance in pixels from the bottom side to the bottom side of the surrounding control | |
Calculated width of the control in pixels | |
Calculated height of the control in pixels | |
Definition of the row of a grid in which the control is to be displayed | |
Definition of the column of a grid in which the control is to be displayed | |
Definition of the transparency of the entire control | |
Selection of the visibility of a control:
| |
Definition of the position on the Z-axis | |
Definition of a transformation of a control:
| |
Definition of a shadow | |
Selection of the method of calculating the width:
| |
Selection of the method of calculating the height:
|
Category: Common
Name |
Description |
---|---|
Definition of the text displayed in the button | |
Reflects the pressed state of the button for the assigned symbol and vice versa. If the button is pressed, the symbol is set to true. If the button is released, the symbol is set to false. If the symbol is set to true independent of the button, the button is pressed. If the symbol is set to false independent of the button, the button is released. During an active user interaction, no value changes of the symbol are transferred to the button.
| |
User-defined name for a group. Only one control in this group can be active. | |
Internal state of the control. This can be Normal or Active. | |
Selection of whether a control should be activated | |
Definition of the name of the control | |
Type name of the control | |
Definition of control classes | |
If a control is logically assigned in the DOM. | |
Definition of the tooltip for the control |
Category: Border
Name |
Description |
---|---|
Definition of the radius of the four corners to round them off | |
Selection of the border style of the four sides of the control | |
Definition of the border width of the four sides of the control |
Category: Icon
Name |
Description |
---|---|
Definition of an optional image in the button | |
Definition of the width of the icon | |
Definition of the unit of the width:
| |
Definition of the height of the icon | |
Definition of the unit of height:
| |
Selecting the horizontal alignment of the icon within the control | |
Selecting the vertical alignment of the icon within the control | |
Definition of the distance of the icon to the border |
Category: Background Image
Name |
Description |
---|---|
Definition of an image that is located above the background color | |
Definition of the height of the background image | |
Selection of the unit of the height of the background image:
| |
Definition of the width of the background image | |
Selection of the unit of the width of the background image:
| |
Definition of an additional distance between the border of the control and background image for the four sides | |
Definition of the vertical alignment of the background image within the control | |
Definition of the horizontal alignment of the background image within the control |
Category: Text
Name |
Description |
---|---|
Definition of the text color | |
Definition of the font using the name of the font family or the keyword | |
Definition of the font size | |
Definition of the font size unit:
| |
Selecting the font style:
| |
Selecting the font weight of the text:
| |
Definition of the distance of the text to the border | |
Selecting the vertical alignment of the text | |
Selecting the horizontal alignment of the text | |
Selecting whether the text wraps if it is too long for one row |
Events
Category: Control
Name |
Description |
---|---|
The ToggleState value of the button has changed. |
Category: Framework
Name |
Description |
---|---|
The control was added to the display. | |
The control was removed from the display. | |
The control was initialized. | |
The control was destroyed. | |
The control was moved in relation to the browser window. | |
The size of the control was changed. |
Category: Operator
Name |
Description |
---|---|
The ToggleState value of the button has changed. | |
The pressed state has changed. | |
The pressed state has changed from not pressed to pressed. | |
The pressed state has changed from pressed to not pressed. | |
A mouse click was executed or a touch screen was briefly touched. | |
The left mouse button was clicked over the control and released. | |
The left mouse button was clicked twice over the control and released. | |
The right mouse button was clicked over the control and released. | |
A mouse button was pressed down over the control. | |
The mouse pointer was moved over the control. | |
The mouse pointer has left the control. | |
A mouse button was released over the control. | |
The left mouse button was pressed down over the control. | |
The right mouse button was pressed down over the control. | |
The mouse was moved over the control. | |
The mouse pointer was moved over the control or one of its children. | |
The mouse pointer has left the control or one of its child controls. | |
The left mouse button was released over the control. | |
The right mouse button was released over the control. | |
The mouse wheel was moved over the control. | |
A finger/stylus was placed against a touch screen. | |
A finger/stylus was moved on a touch screen. | |
A finger/stylus was lifted off a touch screen. | |
An interaction with a touch screen was aborted. |
Access rights
Name |
Description |
---|---|
Determines whether the control is generally observable. | |
Determines whether the control is generally operable. |
Inheritance hierarchy
Toggle Button
NuGet package: Beckhoff.TwinCAT.HMI.Controls
![]() | NuGet packages are available from version 1.12. |
![]() | Available from 1.8 |
See also
API reference for this control