Box#
The Box Widget is for displaying some text in the view.
Props#
Source#
With the Source property the source for the displayed text in the Box 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.
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.
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 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.