Texts¶
Texts are widgets where users can insert and format a text, enabling them to provide context and add annotations easily within slides and dialogs. These widgets can be found in the Widgets panel of the stage.
Widgets in the Text category can also be used in reports. For more information on creating reports in Rulex Studio, click here.
Note
The event triggers available for Texts widgets are:
onClick
onMouseEnter
onMouseLeave
onFocus
onType
onChange
The available text types include:
Text
Card Text
After selecting the desired text type, users can drag it onto the stage and type text inside it.
Like all widgets, by right-clicking on the text’s border, users can perform several operations through the Widget context menu. These operations are common across all widgets except for the Open widget layout entry, which is specific to each widget type. By selecting this option, users can customize their text.
In the table below, users can find all the available options of the Layout options window and their corresponding GOLD references. These settings can also be modified using parametric mode.
Subsection |
Option |
Description |
GOLD Ref |
---|---|---|---|
Background |
Elevation |
It controls the elevation effect of the widget. Increasing the elevation gives the impression of the Texts widget being more lifted and adds depth to it. |
|
Border |
Border style |
It defines the widget border style. The available values are: Dotted, Dashed, Solid, Double, 3D Ridge, 3D Inset, 3D Outset, None, Hidden. |
|
Additional Style |
Cell style |
Here, users can insert a CSS string by typing: |
Subsection |
Option |
Description |
GOLD Ref |
---|---|---|---|
Background |
Background color |
It defines the background color of the header. By clicking it, users can select Standard colors, otherwise they can use the color picker or choose the color code, which can be: Hex, Rgb, Hsl, Hsv. |
|
Header height (px) |
It defines the height of the header in pixels. |
||
Border |
Border style |
It defines the header style. The available values are: Dotted, Dashed, Solid, Double, 3D Ridge, 3D Inset, 3D Outset, None, Hidden. |
|
Text |
Text style and alignment |
Here, users can define the text style, which can be bold, italic or underlined, as well as the text horizontal alignment, which can be left, center or right. |
|
Text |
Here, it is possible to type the title appearing in the header. |
||
Font family |
It defines the font of the title. Users can select the desired one in the drop-down menu. |
||
Font size (px) |
It defines the size of the title in pixels. |
||
Font color |
It defines the color of the title. By clicking it, users can select Standard colors, otherwise they can use the color picker or choose the color code, which can be: Hex, Rgb, Hsl, Hsv. |
||
Additional style |
Cell style |
Here, users can insert a CSS string by typing: |
Subsection |
Option |
Description |
GOLD Ref |
---|---|---|---|
Background |
Background color |
It defines the text background color. By clicking it, users can select Standard colors, otherwise they can use the color picker or choose the color code, which can be: Hex, Rgb, Hsl, Hsv. |
|
Border |
Border style |
It defines the text border style. The available values are: Dotted, Dashed, Solid, Double, 3D Ridge, 3D Inset, 3D Outset, None, Hidden. |
|
Open links on external window |
This option is useful when texts are linked to a website. |
||
Text |
Text style and alignment |
Here, users can define the text style, which can be bold, italic or underlined, the text horizontal alignment, which can be left, center or right, as well as the text vertical alignment, which can be center, top, bottom. |
|
Font family |
It defines the font of the text title. Users can select the desired one in the drop-down menu. |
||
Font size (px) |
It defines the size of the text. |
||
Line spacing |
It defines the vertical space between text lines, improving the readability of your content. |
||
Font color |
It defines the color of the text. By clicking it, users can select Standard colors, otherwise they can use the color picker or choose the color code, which can be: Hex, Rgb, Hsl, Hsv. |
||
Additional style |
Cell style |
Here, users can insert a CSS string by typing: |