Button#
The Button widget is an interactive Widget to trigger Parameter Actions.
Props#
Label#
Source#
With the Source property the source for the displayed text in the Button widget can be configured.
- Datetime - for displaying a date or a time or a combination of both on base of the system clock
- Parameter - for displaying the value of parameter, only available in full edition
- Static - for displaying static text
Format#
When selected source is Datetime the format for the displayed datetime string can be configured by entering a template string.
Examples#
hh:mm:ss- will rendered as 09:42:23h:mm:ss- will rendered as 9:42:23hh:mm:ss [Uhr]- will rendered as 09:42:23 UhrDD.MM.YYYY- will rendered as 10.03.2020dd, DD.MM.YYYY, hh:mm:ss- will rendered as Dienstag, 10.03.2020, 09:42:23
ℹ️ For more possibilities please see momentjs docs.
Locale#
When selected source is Datetime a Locale for the datetime string can be configured. All name sfor months or weekdays will displayed according to your selection. Right now, you can select german and english.
Timezone#
When selected source is Datetime you can configure the timezone for the datetime string. The Options are based on the IANA Time Zone Database so you have to select a Region and a City to get the corresponding timezone. Default is Europe and Berlin.
Parameter#
When selected source is Parameter you can select a Parameter from a the list available in the current view. This means the View-Parameters and all configure GlobalParameters
False Replacer#
When selected source is Parameter and the selected Parameter value is false, the entered string will be displayed.
True Replacer#
When selected source is Parameter and the selected Parameter value is true, the entered string will be displayed.
Text#
When selected source is Static the displayed string can be entered.
Actions#
Parameter#
Select the target Parameter to which the Action will be applied to.
Action#
Select the Action you want to apply to the selected Parameters value. The selectable options depent on the Parameter type.
ℹ️ For more information please see parameters reference.
Action Args#
Action Args depent on the selected Action.
ℹ️ For more information please see parameters reference.
Disabling#
Source#
With the Source property the source for disabling the Button widget can be configured.
- Parameter - for disabling the button when the value of parameter is thruthy, only available in full edition
- Static - for disabling the button statically
Value#
When the selected Source is Static configure statically if the button is disabled or not.
Parameter#
When the selected Source is Parameter configure select the Parameter which will disabled the button.
Styles#
Background Color#
The background color of the widget. You can select between disabled, transparent or a color. If you click on the color string, a picker pops up with several options to select or enter the desired color.
Background Image#
A string defining the background image of the widget can be entered.
Examples#
none- will render no background imageurl=('<URL>')- will render the image from<URL>as background imagelinear-gradient(rgb(255, 0, 0), rgb(0, 0, 255))- will render a gradient from red to blue as background image
ℹ️ For more possibilities for this prop, see background-image docs on MDN.
❗ To load a Background Image from disco's public assets server youe have two options entering the URL:
url=('http://localhost:<HTTP_PORT>/public/<FILENAME>')url=('https://<DNS_HOSTNAME>:<HTTPS_PORT>/public/<FILENAME>')
Border Color#
The border color of the widget. You can select between disabled, transparent or a color. If you click on the color string, a picker pops up with several options to select or enter the desired color.
❗ This property has no effect if you have configured Border Style to none or Border Width to 0.
Border Radius#
A string defining the border radius of the widget can be entered.
Examples#
24- will render the a radius of 24px on all 4 corners of the widget20%- will render the a radius of 20% on all 4 corners of the widget20px 40px 60px 80px- will render a radius of 20px on the top left corner, 40px on the top right corner, 60px on the bottom right corner and 80 px on the bottom left corner
ℹ️ For more possibilities for this prop, see border-radius docs on MDN.
Border Style#
A string defining the border styles of the widget can be entered.
Examples#
none- will render no border on all 4 edges of the widgetnone dashed- will render no border on the top and the bottom edge of the widget, but a dashed border on the left and the right edge
ℹ️ For more possibilities for this prop, see border-style docs on MDN.
❗ This property has no effect if you have configured Border Color to transparent or disabled or Border Width to 0.
Border Width#
A string defining the border widths of the widget can be entered.
Examples#
8- will render a 8px wide border on all 4 edges of the widget8px 16px- will render a 8px wide border on the top and the bottom edge of the widget, but a 16px wide border on the left and the right edge
ℹ️ For more possibilities for this prop, see border-width docs on MDN.
❗ This property has no effect if you have configured Border Color to transparent or disabled or Border Style to none.
Content Alignment Horizontal#
The widget's content can be horizontally aligned to left, center or right. The default is center.
Content Alignment Vertical#
The widget's content can be vertically aligned to top, center or bottom. The default is center.
Cursor Style#
Select the cursor style when the button. the options are default, none, not-allowed and pointer.
ℹ️ For more possibilities for this prop, see cursor docs on MDN.
Font Color#
The font color of the widget. You can select between disabled, transparent or a color. If you click on the color string, a picker pops up with several options to select or enter the desired color.
Font Family#
The font family for the widget. You can enter a string prioritized list of one or more font family names and/or generic family names. If you enter inherit the Font Family will be taken from the view styles.
ℹ️ For more possibilities for this prop, see font-family docs on MDN.
Font Size#
The font size of the widget. You can select between inherit, or enter a size in pixels. When inherit is selected, the Font Size will be taken from the view styles.
Font Style#
The font color of the widget. You can select between inherit, italic or normal. When inherit is selected, the Font Style will be taken from the view styles.
Font Weight#
The font color of the widget. You can select between inherit or from 100 to 900 in steps of 100. When inherit is selected, the Font Weight will be taken from the view styles.
Line Height#
A string defining the line height of the widget can be entered.
Examples#
normal- will render a normal line height2- will render a line height 2 times the select Font Size
ℹ️ For more possibilities for this prop, see line-height docs on MDN.
❗ This property has nearly no effect for single line strings, so it is recommended to keep it to normal.
Opacity#
A number between 0 and 1 in steps of 0.01 defining the widget's opacity. 1 means no opacity, 0 full opacity.
Inner Padding#
A string defining the space between the content and the box of the widget.
Examples#
8- will render a space of 8px on all 4 edges8px 16px- will render a 8px wide space on the top and the bottom edge of the widget, but a 16px wide space on the left and the right edge
ℹ️ For more possibilities for this prop, see padding docs on MDN.
Visibility#
The visibility of the widget. You can select between hidden and visibile.
Container Padding#
A string defining the space between the box and the container of the widget.
Examples#
8- will render a space of 8px on all 4 edges8px 16px- will render a 8px wide space on the top and the bottom edge of the widget, but a 16px wide space on the left and the right edge
ℹ️ For more possibilities for this prop, see padding docs on MDN.
Active Background Color#
The background color of the widget when the button is active. You can select between disabled, transparent or a color. If you click on the color string, a picker pops up with several options to select or enter the desired color.
Active Border Color#
The border color of the widget when the button is active. You can select between disabled, transparent or a color. If you click on the color string, a picker pops up with several options to select or enter the desired color.
❗ This property has no effect if you have configured Border Style to none or Border Width to 0.
Active Font Color#
The font color of the widget when the button is active. You can select between disabled, transparent or a color. If you click on the color string, a picker pops up with several options to select or enter the desired color.
Active Opacity#
A number between 0 and 1 in steps of 0.01 defining the widget's opacity when the button is active. 1 means no opacity, 0 full opacity.
Disabled Background Color#
The background color of the widget when the button is disabled. You can select between disabled, transparent or a color. If you click on the color string, a picker pops up with several options to select or enter the desired color.
Disabled Border Color#
The border color of the widget when the button is disabled. You can select between disabled, transparent or a color. If you click on the color string, a picker pops up with several options to select or enter the desired color.
❗ This property has no effect if you have configured Border Style to none or Border Width to 0.
Disabled Font Color#
The font color of the widget when the button is disabled. You can select between disabled, transparent or a color. If you click on the color string, a picker pops up with several options to select or enter the desired color.
Disabled Cursor Style#
Select the cursor style when the button is disabled. the options are default, none, not-allowed and pointer.
ℹ️ For more possibilities for this prop, see cursor docs on MDN.
Disabled Opacity#
A number between 0 and 1 in steps of 0.01 defining the widget's opacity when the button is disabled. 1 means no opacity, 0 full opacity.
Hover Background Color#
The background color of the widget when the button is hovered. You can select between disabled, transparent or a color. If you click on the color string, a picker pops up with several options to select or enter the desired color.
Hover Border Color#
The border color of the widget when the button is hovered. You can select between disabled, transparent or a color. If you click on the color string, a picker pops up with several options to select or enter the desired color.
❗ This property has no effect if you have configured Border Style to none or Border Width to 0.
Hover Font Color#
The font color of the widget when the button is hovered. You can select between disabled, transparent or a color. If you click on the color string, a picker pops up with several options to select or enter the desired color.
Hover Opacity#
A number between 0 and 1 in steps of 0.01 defining the widget's opacity when the button is hovered. 1 means no opacity, 0 full opacity.